ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивное слайд-шоу на чистом CSS

Адаптивное слайд-шоу на чистом CSS

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

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

Вся прокрутка слайдов происходит в ручном режиме, просто нажав на кнопку начнется перелистывание. Но и сколько внизу находится кнопок, то тоже аналогичное количество качается кадров. Изначально он шел под страницу и не был адаптивным, но здесь все полностью, включая функционал работает от стилей CSS. Где только оставалось прописать @media запросы на сам каркас со снимками, и на кнопки под небольшие мониторы.

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

Второй больше подходит к смартфону или планшету.

Здесь мы наблюдаем с мобильного аппарата.

Мобильный слайдер для сайта на CSS

Установочный процесс:

HTML

Код

CSS

Код

.understandin{
  width: 815px;
  height: 385px;
  overflow: hidden;
}
.mobilasa{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.komosabelus{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.snimk{
  width: 50px;
  height: 10px;
  border: 2px solid #e8e8ea;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.snimk:hover{
  background: #e8e8ea;
}

input[name="r"]{
  position: absolute;
  visibility: hidden;
}

.adaptivnu-slayder{
  width: 500%;
  height: 100%;
  display: flex;
}

.udobenysam{
  width: 20%;
  transition: 0.6s;
}
.udobenysam img{
  width: 100%;
  height: 100%;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}

@media screen and (max-width: 780px){
.understandin{
width: 100%;
height: 310px;
margin: 0px 0px 0px 0px;
}
}

@media screen and (max-width: 780px) {
.komosabelus {
  left: 50%;
  width: 230px;
  height: 8px;
  margin: 5px;
  cursor: pointer;
}
}

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

И не забываем, что при установках вам нужно будет выставить свои значение по ширине, или просто по ширине изначально задать 100%, где после чего он становится резиновым, что ставится в заданное место, как блок или вверх сайта.

Демонстрация

31 Августа 2019 Загрузок: 4 Просмотров: 1344 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0