Адаптивный слайдер под разное разрешение CSS

рейтинг 1.0 из 5

Великолепный слайдер для сайта, где будет автоматически подстраивается под различные разрешение, так как он идет адаптивный по стилистике. Сам стиль выстроен так, что можно его поставить на разные цветовые гаммы, а если говорить о главной страницы, где основном его функций наблюдаем. То здесь под размещение он подойдет как в саму шапку, если она по размерам совпадает, а точнее больше по ширине. При установке вам не нужно по ширине и высоте выстраивать, здесь все автоматически установится и главное все корректно будет смотреться. Изначально разработчик на каркас выстроил обвод, который можно сделать темно прозрачным, если ставить на светлый формат, что выглядит современно. 


Теперь немного по тематике, как можно заметить, где он изначально делался так, что его можно редактировать самостоятельно, где можно увидеть на софт ресурсе, как интернет магазин, так на просто логе будет отличным решение для подачи информации, что сами для пользователей и гостей сайта заложите, где по клику и прямой ссылки переход совершается на основу материала. Эта карусель или слайдер по своему довольно уникален, где есть небольшие эффекты анимации зависания и масштабирования для каждого снимка, изображение. 


Поскольку в этой версии используется только CSS, более жестко включать динамические эффекты, плюс он не будет совершенно грузить страницу где его установите. Некоторые ставят для презентации, здесь от темы более зависит, где они делают отдельную страницу на один материал, и к нему закрепляют слайд шоу с полной картотекой для снимков, что оригинально и главное понятно. Здесь нужно подчеркнуть, что есть возможность использовать это для создания слайдера, который хорошо работает во всех браузерах с анимацией hover в стиле, хотя этот элемент закреплен под стрелки по сторонам, что при наведении меняет оттенок. 


Также слайдер был проверен на работоспособность, где можно посмотреть. 


Слайдер для сайта в светлом виде 


Приступаем к установке: 


HTML 



Код
<div class="kilsexagsatuko"> 

   

  <input type="radio" id="i1" name="images" checked /> 

  <input type="radio" id="i2" name="images" /> 

  <input type="radio" id="i3" name="images" /> 

  <input type="radio" id="i4" name="images" /> 

  <input type="radio" id="i5" name="images" />  

   

  <div class="gotsamilan_img" id="one">  

   

  <img src="http://zornet.ru/ABVUN/sarunolas/little_pony_art-800x480.jpg"> 

   

  <label class="prev" for="i5"><span>‹</span></label> 

  <label class="next" for="i2"><span>›</span></label>  

   

  </div> 

   

  <div class="gotsamilan_img" id="two"> 

   

  <img src="http://zornet.ru/ABVUN/sarunolas/cropped_800_480_111290.jpg" > 

   

  <label class="prev" for="i1"><span>‹</span></label> 

  <label class="next" for="i3"><span>›</span></label> 

   

  </div> 

   

  <div class="gotsamilan_img" id="three"> 

  <img src="http://zornet.ru/ABVUN/sarunolas/up_house-wallpaper-1280x800.jpg">  

   

  <label class="prev" for="i2"><span>‹</span></label> 

  <label class="next" for="i4"><span>›</span></label> 

  </div> 



  <div class="gotsamilan_img" id="four"> 

  <img src="http://zornet.ru/ABVUN/sarunolas/big_hero_6_baymax-wallpaper-1152x720.jpg">  

   

  <label class="prev" for="i3"><span>‹</span></label> 

  <label class="next" for="i5"><span>›</span></label> 

  </div> 



  <div class="gotsamilan_img" id="five"> 

  <img src="http://zornet.ru/ABVUN/sarunolas/toys-wallpaper-hd-16339-17046-hd-w-3MQnr.jpg">  

   

  <label class="prev" for="i4"><span>‹</span></label> 

  <label class="next" for="i1"><span>›</span></label> 



  </div> 



  <div id="nav_gotsamilan"> 

  <label for="i1" class="zarekimdtun" id="dot1"></label> 

  <label for="i2" class="zarekimdtun" id="dot2"></label> 

  <label for="i3" class="zarekimdtun" id="dot3"></label> 

  <label for="i4" class="zarekimdtun" id="dot4"></label> 

  <label for="i5" class="zarekimdtun" id="dot5"></label> 

  </div>  

</div>


CSS 


Код
#i1, #i2, #i3, #i4, #i5{ display: none;} 



.kilsexagsatuko{ 

  margin: 0 auto; 

  margin-top: 20px; 

  position: relative; 

  width: 70%; 

  height: 0; 

  padding-bottom: 38%; 

  user-select: none; 

  background-color: #1c1c1c; 

  border: solid 10px #616161; 

  border-radius:10px ;  

  } 



  .kilsexagsatuko .gotsamilan_img{ 

  position: absolute; 

  width: 100%;; 

  height: 100%; 

  } 

  .kilsexagsatuko .gotsamilan_img img{ 

  width: inherit; 

  height: inherit; 

  } 



  .prev, .next{ 

  width: 12%; 

  height: inherit; 

  position: absolute; 

  top:0;  

  background-color: rgba(88, 88, 88,.2); 

  color:rgba(244, 244, 244,.9); 

  z-index: 99; 

  transition: .45s; 

  cursor: pointer; 

  text-align: center; 

  } 



  .next{right:0;} 

  .prev{left:0;} 



  label span{ 

  position: absolute; 

  font-size: 100pt; 

  top: 50%; 

  transform: translateY(-50%); 

  } 



  .prev:hover, .next:hover{ 

  transition: .3s; 

  background-color: rgba(88, 88, 89,.8); 

  color: #ffffff;  

  } 



.kilsexagsatuko #nav_gotsamilan{ 

  width: 100%; 

  bottom: 12%; 

  height: 11px; 

  position: absolute; 

  text-align: center; 

  z-index: 99; 

  cursor: default; 





#nav_gotsamilan .zarekimdtun{ 

  top: -5px; 

  width: 18px; 

  height: 18px; 

  margin: 0 4px; 

  position: relative; 

  border-radius: 100%; 

  display: inline-block; 

  background-color: rgba(0, 0, 0, 0.6); 

  transition: .4s; 





#nav_gotsamilan .zarekimdtun:hover { 

  cursor: pointer; 

  background-color: rgba(255, 255, 255, 0.9); 

  transition: .25s 





.gotsamilan_img{z-index: -1;} 



  #i1:checked ~ #one , 

  #i2:checked ~ #two , 

  #i3:checked ~ #three, 

  #i4:checked ~ #four , 

  #i5:checked ~ #five  

  {z-index: 9; animation: scroll 1s ease-in-out;} 



  #i1:checked ~ #nav_gotsamilan #dot1, 

  #i2:checked ~ #nav_gotsamilan #dot2, 

  #i3:checked ~ #nav_gotsamilan #dot3, 

  #i4:checked ~ #nav_gotsamilan #dot4, 

  #i5:checked ~ #nav_gotsamilan #dot5 

  { background-color: rgba(255,255,255,.9);} 



@keyframes scroll{ 

  0%{ opacity:.4;} 

  100%{opacity:1;} 

}  



@media screen and (max-width: 685px){ 

  .kilsexagsatuko{ 

  border: none; 

  width: 100%; 

  height: 0; 

  padding-bottom: 55%;  

  }  

   

  label span { font-size: 50pt; } 

   

  .prev, .next{ 

  width: 15%; 

  }  

  #nav_gotsamilan .zarekimdtun{ 

  width: 12px; 

  height: 12px; 

  } 



@media screen and(min-width: 970px){ 

  .me{ display: none;} 

}



Переходы вы сами выстраиваете, это по количеству с эффектами, который также контролируется с помощью CSS. Где безусловно впечатление большое и отлично работает как простом шаблоне пользовательском интерфейсе. 


  • Дата: 06.06.2018, 20:58
  • Просмотры: 55
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий