ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер без Javascript в CSS

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

Это адаптивный слайдер, который использует чистые стили CSS, где отлично выстроенная карусель для вывода изображение с переключателями слайдов. Слайдер на сайте стал неотъемлемой частью дизайна и функций, что выводит изображение с переходом на нужную информацию. Теперь веб-разработчик может создать мобильную карусель с кнопками, что могут находиться, как по правой стороне, так и по левой. Но главное, что конструкция будет великолепно смотреться на всех обновленных браузерах и телефонах.

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

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

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

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

HTML

Код

CSS

Код

body,html{margin:0;padding:0;}

.kopadormason {
  position: relative;
  z-index:0;
}

.kopadormason input{
  display: none;
}
.kopadormason label {
  bottom: 10px;
  display: inline-block;
  z-index: 2;
  width: 25px;
  height: 25px;
  transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  background: #dcdce2;
  border: 1px solid #e2d8d8;
  border-bottom-color: #b1aaaa;
  border-radius: 100px;
  box-shadow: inset 0 1px 0 #f3f3f3, 0 1px 2px #0c0c0c;
  text-align: center;
  cursor: pointer;
  font: 14px/27px arial, tahoma;
  color: #1d1b1b;
}

.kopadormason .dasenupag_nesamopad {
  position: absolute;
  bottom: 15px;
  z-index: 11;
  padding-left: 15px;
}

.kopadormason .avaluablson{
  width: 100%;
  opacity: 1.0;
  transition: opacity 0.0s linear 0.2s;
  -moz-transition: opacity 0.0s linear 0.2s;
  -webkit-transition: opacity 0.0s linear 0.2s;
  -o-transition: opacity 0.0s linear 0.2s;
}

.kopadormason img {
  display:block;
  height: 350px;
  width: 70%;
  }

.image-tape:hover .image-tape__avaluablson
{
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.kopadormason .avaluablson ~ .avaluablson
{
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.0;
}
.kopadormason input:nth-of-type(1):checked ~ .dasenupag_nesamopad label:nth-of-type(1),
.kopadormason input:nth-of-type(2):checked ~ .dasenupag_nesamopad label:nth-of-type(2),
.kopadormason input:nth-of-type(3):checked ~ .dasenupag_nesamopad label:nth-of-type(3),
.kopadormason input:nth-of-type(4):checked ~ .dasenupag_nesamopad label:nth-of-type(4),
.kopadormason input:nth-of-type(5):checked ~ .dasenupag_nesamopad label:nth-of-type(5)
{
  color: #fff;
}
.kopadormason input:nth-of-type(1):checked ~ .avaluablson:nth-of-type(1),
.kopadormason input:nth-of-type(2):checked ~ .avaluablson:nth-of-type(2),
.kopadormason input:nth-of-type(3):checked ~ .avaluablson:nth-of-type(3),
.kopadormason input:nth-of-type(4):checked ~ .avaluablson:nth-of-type(4),
.kopadormason input:nth-of-type(5):checked ~ .avaluablson:nth-of-type(5)
{
  opacity: 1.0;
  transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  z-index: 6;
}

/* авторотация слайдов */
@keyframes avaluablson-autoplay_count_2 {0%{opacity:0;}20%{opacity:1;}50%{opacity:1;}70%{opacity:0;}100%{opacity:0;}}
@keyframes avaluablson-autoplay_count_3 {0%{opacity:0;}10%{opacity:1;}33% {opacity:1;}43% {opacity:0;}100%{opacity:0;}}
@keyframes avaluablson-autoplay_count_4 {0%{opacity:0;}8% {opacity:1;}25% {opacity:1;}33% {opacity:0;}100%{opacity:0;}}
@keyframes avaluablson-autoplay_count_5 {0%{opacity:0;}7% {opacity:1;}20%{opacity:1;}27% {opacity:0;}100%{opacity:0;}}

@-moz-keyframes avaluablson-autoplay_count_2 {0%{opacity:0;}20%{opacity:1;}50%{opacity:1;}70%{opacity:0;}100%{opacity:0;}}
@-moz-keyframes avaluablson-autoplay_count_3 {0%{opacity:0;}10%{opacity:1;}33% {opacity:1;}43% {opacity:0;}100%{opacity:0;}}
@-moz-keyframes avaluablson-autoplay_count_4 {0%{opacity:0;}8% {opacity:1;}25% {opacity:1;}33% {opacity:0;}100%{opacity:0;}}
@-moz-keyframes avaluablson-autoplay_count_5 {0%{opacity:0;}7% {opacity:1;}20%{opacity:1;}27% {opacity:0;}100%{opacity:0;}}

@-webkit-keyframes avaluablson-autoplay_count_2 {0%{opacity:0;}20%{opacity:1;}50%{opacity:1;}70%{opacity:0;}100%{opacity:0;}}
@-webkit-keyframes avaluablson-autoplay_count_3 {0%{opacity:0;}10%{opacity:1;}33% {opacity:1;}43% {opacity:0;}100%{opacity:0;}}
@-webkit-keyframes avaluablson-autoplay_count_4 {0%{opacity:0;}8% {opacity:1;}25% {opacity:1;}33% {opacity:0;}100%{opacity:0;}}
@-webkit-keyframes avaluablson-autoplay_count_5 {0%{opacity:0;}7% {opacity:1;}20%{opacity:1;}27% {opacity:0;}100%{opacity:0;}}

@-o-keyframes avaluablson-autoplay_count_2 {0%{opacity:0;}20%{opacity:1;}50%{opacity:1;}70%{opacity:0;}100%{opacity:0;}}
@-o-keyframes avaluablson-autoplay_count_3 {0%{opacity:0;}10%{opacity:1;}33% {opacity:1;}43% {opacity:0;}100%{opacity:0;}}
@-o-keyframes avaluablson-autoplay_count_4 {0%{opacity:0;}8% {opacity:1;}25% {opacity:1;}33% {opacity:0;}100%{opacity:0;}}
@-o-keyframes avaluablson-autoplay_count_5 {0%{opacity:0;}7% {opacity:1;}20%{opacity:1;}27% {opacity:0;}100%{opacity:0;}}

.kopadormason.gumansa_ntekenc_vekeon_2 .avaluablson
{
  animation: avaluablson-autoplay_count_2 10s infinite;
  -moz-animation: avaluablson-autoplay_count_2 10s infinite;
  -webkit-animation: avaluablson-autoplay_count_2 10s infinite;
  -o-animation: avaluablson-autoplay_count_2 10s infinite;
}
.kopadormason.gumansa_ntekenc_vekeon_3 .avaluablson
{
  animation: avaluablson-autoplay_count_3 15s infinite;
  -moz-animation: avaluablson-autoplay_count_3 15s infinite;
  -webkit-animation: avaluablson-autoplay_count_3 15s infinite;
  -o-animation: avaluablson-autoplay_count_3 15s infinite;
}
.kopadormason.gumansa_ntekenc_vekeon_4 .avaluablson
{
  animation: avaluablson-autoplay_count_4 20s infinite;
  -moz-animation: avaluablson-autoplay_count_4 20s infinite;
  -webkit-animation: avaluablson-autoplay_count_4 20s infinite;
  -o-animation: avaluablson-autoplay_count_4 20s infinite;
}
.kopadormason.gumansa_ntekenc_vekeon_5 .avaluablson
{
  animation: avaluablson-autoplay_count_5 25s infinite;
  -moz-animation: avaluablson-autoplay_count_5 25s infinite;
  -webkit-animation: avaluablson-autoplay_count_5 25s infinite;
  -o-animation: avaluablson-autoplay_count_5 25s infinite;
}
.kopadormason .avaluablson:nth-of-type(2) {

  animation-delay:5s;-moz-animation-delay:5s;
  -webkit-animation-delay:5s;-o-animation-delay:5s;
}
.kopadormason .avaluablson:nth-of-type(3) {
  animation-delay:10s;
  -moz-animation-delay:10s;
  -webkit-animation-delay:10s;
  -o-animation-delay:10s;
}
.kopadormason .avaluablson:nth-of-type(4){
  animation-delay:15s;
  -moz-animation-delay:15s;
  -webkit-animation-delay:15s;
  -o-animation-delay:15s;
}
.kopadormason .avaluablson:nth-of-type(5){
  animation-delay:20s;
  -moz-animation-delay:20s;
  -webkit-animation-delay:20s;
  -o-animation-delay:20s;
}

.kopadormason input:checked ~ .avaluablson
{
  animation: none;
  -moz-animation: none;
  -webkit-animation: none;
  -o-animation: none;
}


.kopadormason label:hover
{
  background: #dfdfdf;
}
.kopadormason input:nth-of-type(1):checked ~ .dasenupag_nesamopad label:nth-of-type(1),
.kopadormason input:nth-of-type(2):checked ~ .dasenupag_nesamopad label:nth-of-type(2),
.kopadormason input:nth-of-type(3):checked ~ .dasenupag_nesamopad label:nth-of-type(3),
.kopadormason input:nth-of-type(4):checked ~ .dasenupag_nesamopad label:nth-of-type(4),
.kopadormason input:nth-of-type(5):checked ~ .dasenupag_nesamopad label:nth-of-type(5)
{
  background: #792188;
}

Важно: Если просматривать на demo страницы, то переключатели находятся по правую сторону, где переделал и перевел на левую, ведь так намного удобнее, если вам нужно поменять размер длинны, то сами кнопки остаются на одном месте. Но вдруг вам нужно все как изначально шло, то можете скачать, там идет оригинальный стиль.

Что по ширине, то здесь выставил на px, где все кадры идут в одном размере, но не нужно забывать про мобильный обзор, где изначально прописано auto, что автоматически подгоняет его под затребованную диагональ.

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

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

17 Мая 2019 Загрузок: 1 Просмотров: 2016 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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