ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер в адаптивной форме CSS для сайта

Слайдер в адаптивной форме CSS для сайта

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

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

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

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

Слайдер на CSS для сайта

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

Слайдер изображений на CSS

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

HTML

Код
<div class="pedesanum-kidsavenub">
  <input name="segedekus-kumab-n" id="vedum-tesab-0" type="radio" class="segedekus-kumab sl">
  <input name="segedekus-kumab-n" id="vedum-tesab-1" type="radio" class="segedekus-kumab sl">
  <input name="segedekus-kumab-n" id="vedum-tesab-2" type="radio" class="segedekus-kumab sl">
  <input name="segedekus-kumab-n" id="vedum-pl" type="radio" class="segedekus-kumab" checked>
  <input name="segedekus-kumab-n" id="vedum-munova-0" type="radio" class="segedekus-kumab pa">
  <input name="segedekus-kumab-n" id="vedum-munova-1" type="radio" class="segedekus-kumab pa">
  <input name="segedekus-kumab-n" id="vedum-munova-2" type="radio" class="segedekus-kumab pa">
  <ul>
  <div>
  <img src="Ссылка на изображение №1" style="width: 100%;">
  </div>
  <li class="dekus-0 vedum-kagod">
  <img src="Ссылка на изображение №2" alt="1° Slider" title="First">
  </li>
  <li class="dekus-1 vedum-kagod">
  <img src="Ссылка на изображение №3" alt="2° Slider" title="Second">
  </li>
  <li class="dekus-2 vedum-kagod">
  <img src="Ссылка на изображение №4" alt="3° Slider" title="Third">
  </li>
  </ul>
  <div class="vedum-de">
  <label class="dekus-0">
  <span class="vedum-lason"><span class="vedum-wr">Первое название</span></span>
  <br><span class="vedum-de"><span class="vedum-wr">Первое описание картинки</span></span>
  </label>
  <label class="dekus-1">
  <span class="vedum-lason"><span class="vedum-wr">Ключевое слово</span></span>
  <br><span class="vedum-de"><span class="vedum-wr">Здесь краткое описание изображение</span></span>
  </label>
  <label class="dekus-2">
  <span class="vedum-lason"><span class="vedum-wr">Ключевая фраза</span></span>
  <br><span class="vedum-de"><span class="vedum-wr">И сразу идет описание</span></span>
  </label>
  </div>
  <div class="vedum-arrp">
  <label class="dekus-0" for="vedum-tesab-0"><span><i></i></span></label>
  <label class="dekus-1" for="vedum-tesab-1"><span><i></i></span></label>
  <label class="dekus-2" for="vedum-tesab-2"><span><i></i></span></label>
  </div>
  <div class="vedum-arrn">
  <label class="dekus-0" for="vedum-tesab-0"><span><i></i></span></label>
  <label class="dekus-1" for="vedum-tesab-1"><span><i></i></span></label>
  <label class="dekus-2" for="vedum-tesab-2"><span><i></i></span></label>
  </div>

  <div class="vedum-nedsa-medas">
  <label class="play1" for="vedum-pl">
  <span class="vedum-kidalon"></span>
  </label>
  <label class="kedsamged0" for="vedum-munova-0">
  <span class="vedum-kidalon"></span>
  </label>
  <label class="kedsamged1" for="vedum-munova-1">
  <span class="vedum-kidalon"></span>
  </label>
  <label class="kedsamged2" for="vedum-munova-2">
  <span class="vedum-kidalon"></span>
  </label>
  </div>

</div>

CSS

Код
.pedesanum-kidsavenub {
  display: inline-block;
  position: relative;
  max-height: 480px;  
  width: 57%;
  margidekus-top: 10px;
}
.pedesanum-kidsavenub > .segedekus-kumab {
  display: none;
}
.pedesanum-kidsavenub > ul {
  position: relative;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}
.pedesanum-kidsavenub > ul > div {
  width: 100%;
  visibility: hidden;
  font-size: 0px;
  line-height: 0;
}
.pedesanum-kidsavenub > ul > li.vedum-kagod img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.3%;
  width: 98%;
  max-height: 500px;
  margin: 0;
  object-fit: cover;
  object-kidalonsition: 50% 50%;
}
.pedesanum-kidsavenub > ul > li.vedum-kagod {
  font-size: 0pt;
}
.pedesanum-kidsavenub > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  white-space: normal;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.pedesanum-kidsavenub > ul > li.vedum-kagod,
.pedesanum-kidsavenub > .vedum-arrp,
.pedesanum-kidsavenub > .vedum-arrn,
.pedesanum-kidsavenub > .vedum-bu,
.pedesanum-kidsavenub > .vedum-nedsa-medas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pedesanum-kidsavenub > .vedum-arrp,
.pedesanum-kidsavenub > .vedum-arrn {
  position: absolute;
  top: 50%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 5;
}
.pedesanum-kidsavenub > .vedum-arrp > label,
.pedesanum-kidsavenub > .vedum-arrn > label {
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  z-index: -1;
}
.pedesanum-kidsavenub > .vedum-arrp {
  left: 0;
}
.pedesanum-kidsavenub > .vedum-arrn {
  right: 0;
}
.pedesanum-kidsavenub > .sl:checked ~ .vedum-arrp > label,
.pedesanum-kidsavenub > .sl:checked ~ .vedum-arrn > label {
  opacity: 0;
  z-index: -1;
}
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ .vedum-arrp > label.dekus-2,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ .vedum-arrp > label.dekus-2,
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ .vedum-arrn > label.dekus-1,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ .vedum-arrn > label.dekus-1,  
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ .vedum-arrp > label.dekus-0,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ .vedum-arrp > label.dekus-0,
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ .vedum-arrn > label.dekus-2,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ .vedum-arrn > label.dekus-2,  
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ .vedum-arrp > label.dekus-1,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ .vedum-arrp > label.dekus-1,
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ .vedum-arrn > label.dekus-0,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ .vedum-arrn > label.dekus-0 {
  opacity: 1;
  z-index: 5;
}

/* calculate autoplay */
@-webkit-keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-moz-keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrp > label.dekus-2,
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrn > label.dekus-1 {
  -webkit-animation: arrow 12300ms infinite -1000ms;
  -moz-animation: arrow 12300ms infinite -1000ms;
  animation: arrow 12300ms infinite -1000ms;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrp > label.dekus-0,
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrn > label.dekus-2 {
  -webkit-animation: arrow 12300ms infinite 3100ms;
  -moz-animation: arrow 12300ms infinite 3100ms;
  animation: arrow 12300ms infinite 3100ms;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrp > label.dekus-1,
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-arrn > label.dekus-0 {
  -webkit-animation: arrow 12300ms infinite 7200ms;
  -moz-animation: arrow 12300ms infinite 7200ms;
  animation: arrow 12300ms infinite 7200ms;
}

/* stop */
.pedesanum-kidsavenub > .sl:checked ~ .vedum-arrp > label,
.pedesanum-kidsavenub > .sl:checked ~ .vedum-arrn > label,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-arrp > label,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-arrn > label {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
}

/* calculate autoplay */
.pedesanum-kidsavenub > .vedum-bu {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 6;
  font-size: 0;
  line-height: 8pt;
  text-align: center;
}
.pedesanum-kidsavenub > .vedum-bu > div {
  margidekus-left: -50%;
  width: 100%;
}
.pedesanum-kidsavenub > .vedum-bu > label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.pedesanum-kidsavenub > .vedum-bu > label > .vedum-th {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  z-index: 1;
  line-height: 0;
  left: -55px;
  top: -48px;
}
.pedesanum-kidsavenub > .vedum-bu > label > .vedum-th > img {
  max-width: none;
}.pedesanum-kidsavenub > .vedum-de {
  z-index: 3;
}
.pedesanum-kidsavenub > .vedum-de a,
.pedesanum-kidsavenub > .vedum-de a:visited,
.pedesanum-kidsavenub > .vedum-de a:active {
  color: inherit;
}
.pedesanum-kidsavenub > .vedum-de a:hover {
  text-decoration: none;
}
.pedesanum-kidsavenub > .vedum-de > label {
  position: absolute;
  word-wrap: break-word;
  white-space: normal;
  text-align: left;
  max-width: 50%;
  left: 0;
}
.pedesanum-kidsavenub > .vedum-de > label > span {
  vertical-align: top;
}
.pedesanum-kidsavenub > .vedum-de > label span {
  display: inline-block;
}
.pedesanum-kidsavenub .vedum-ge {
  visibility: hidden;
  position: absolute;
  font-size: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  -webkit-transition: visibility .3s linear, opacity .3s linear;
  -o-transition: visibility .3s linear, opacity .3s linear;
  transition: visibility .3s linear, opacity .3s linear;
}
.pedesanum-kidsavenub .vedum-ge.vedum-show {
  visibility: visible;
  opacity: 1;
}
.pedesanum-kidsavenub .vedum-ge.vedum-show img {
  width: 33.333333333333336%;
}
.pedesanum-kidsavenub .vedum-ge.vedum-show .vedum-fi-kagod {
  position: absolute;
  left: -33.333333333333336%;
  top: 0;
}
.pedesanum-kidsavenub .vedum-ge.vedum-show .vedum-la-kagod {
  position: absolute;
  left: 100%;
  top: 0;
}
.pedesanum-kidsavenub .vedum-ge > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
}.pedesanum-kidsavenub > ul > li.dekus-0 {
  left: 0%;
}
.pedesanum-kidsavenub > ul > li.dekus-1 {
  left: 100%;
}
.pedesanum-kidsavenub > ul > li.dekus-2 {
  left: 200%;
}
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ ul > li,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ ul > li {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);
}
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ ul > li,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ ul > li {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
}
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ ul > li,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ ul > li {
  -webkit-transform: translateX(-200%);
  -moz-transform: translateX(-200%);
  transform: translateX(-200%);
}
.pedesanum-kidsavenub > ul > li {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 1;
  -webkit-transition: -webkit-transform 1000ms;
  -moz-transition: -moz-transform 1000ms;
  transition: transform 1000ms;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

/* calculate autoplay */
@-webkit-keyframes slide {
  0%, 25.203252032520325% { -webkit-transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); }
}
@-moz-keyframes slide {
  0%, 25.203252032520325% { -moz-transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); }
}
@keyframes slide {
  0%, 25.203252032520325% { transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { transform: translateX(-200%); }
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ ul > li {
  -webkit-animation: slide 12300ms infinite;
  -moz-animation: slide 12300ms infinite;
  animation: slide 12300ms infinite;
   
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ ul > li,
.pedesanum-kidsavenub > .pa:checked ~ ul > li {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

/* calculate autoplay */
.pedesanum-kidsavenub > .vedum-arrp,
.pedesanum-kidsavenub > .vedum-arrn {
  top: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
}
.pedesanum-kidsavenub > .vedum-arrp:hover,
.pedesanum-kidsavenub > .vedum-arrn:hover {
  opacity: .9;
}
.pedesanum-kidsavenub > .vedum-arrp {
  left: 0;
}
.pedesanum-kidsavenub > .vedum-arrn {
  right: 0;
}
.pedesanum-kidsavenub > .vedum-arrp > label,
.pedesanum-kidsavenub > .vedum-arrn > label {
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.pedesanum-kidsavenub > .vedum-arrp > label span,
.pedesanum-kidsavenub > .vedum-arrn > label span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.pedesanum-kidsavenub > .vedum-arrp > label span {
  float: left;
}
.pedesanum-kidsavenub > .vedum-arrn > label span {
  float: right;
}
.pedesanum-kidsavenub > .vedum-arrp > label span:after,
.pedesanum-kidsavenub > .vedum-arrn > label span:after {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -23px;
  font: 64px "bootstrapcontrols";
  color: #fff;
  line-height: 47px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(21, 20, 20, 0.6);
}
.pedesanum-kidsavenub > .vedum-arrp > label span:after {
  content: '\2039';
}
.pedesanum-kidsavenub > .vedum-arrn > label span:after {
  content: '\203A';
}.pedesanum-kidsavenub > .vedum-bu {
  bottom: 20px;
  width: 70%;
  left: 15%;
}
.pedesanum-kidsavenub > .vedum-bu > label {
  margin: 0 2px;
  padding: 5px;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 0 1px #fff;
  box-shadow: inset 0 0 0 1px #fff;  
}
.pedesanum-kidsavenub > .vedum-bu > label > .vedum-th {
  border: 3px solid #fff;
  margidekus-top: -13px;
  -webkit-transition: opacity .3s, visibility .3s;
  -moz-transition: opacity .3s, visibility .3s;
  transition: opacity .3s, visibility .3s;
}
.pedesanum-kidsavenub > .vedum-bu > label > .vedum-th:before {
  content: '';
  position: absolute;
  width: 0;  
  height: 0;  
  left: 50%;
  margidekus-left: -5px;
  bottom: -10px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
.pedesanum-kidsavenub > .vedum-bu > label:hover > .vedum-th {
  opacity: 1;
  visibility: visible;
}
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ .vedum-bu > label.dekus-0,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ .vedum-bu > label.dekus-0,
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ .vedum-bu > label.dekus-1,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ .vedum-bu > label.dekus-1,
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ .vedum-bu > label.dekus-2,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ .vedum-bu > label.dekus-2 {
  background: #fff;
  padding: 6px;
  -webkit-box-shadow: none;
  box-shadow: none;  
}

/* calculate autoplay */
@-webkit-keyframes bullet {
  0%, 33.32333333333334% {
  -webkit-box-shadow: none;
  background: #fff;
  padding: 6px;
  }
  33.333333333333336%, 100% {
  -webkit-box-shadow: inset 0 0 0 1px #fff;
  background: transparent;
  padding: 5px;
  margidekus-bottom: 0;
  }
}
@-moz-keyframes bullet {
  0%, 33.32333333333334% {
  -moz-box-shadow: none;
  background: #fff;
  padding: 6px;
  }
  33.333333333333336%, 100% {
  -moz-box-shadow: inset 0 0 0 1px #fff;
  background: transparent;
  padding: 5px;
  margidekus-bottom: 0;
  }
}
@keyframes bullet {
  0%, 33.32333333333334% {
  box-shadow: none;
  background: #fff;
  padding: 6px;
  }
  33.333333333333336%, 100% {
  box-shadow: inset 0 0 0 1px #fff;
  background: transparent;
  padding: 5px;
  margidekus-bottom: 0;
  }
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-bu > label.dekus-0 {
  -webkit-animation: bullet 12300ms infinite -1000ms;
  -moz-animation: bullet 12300ms infinite -1000ms;
  animation: bullet 12300ms infinite -1000ms;  
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-bu > label.dekus-1 {
  -webkit-animation: bullet 12300ms infinite 3100ms;
  -moz-animation: bullet 12300ms infinite 3100ms;
  animation: bullet 12300ms infinite 3100ms;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-bu > label.dekus-2 {
  -webkit-animation: bullet 12300ms infinite 7200ms;
  -moz-animation: bullet 12300ms infinite 7200ms;
  animation: bullet 12300ms infinite 7200ms;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-bu > label > .vedum-kidalon,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-bu > label > .vedum-kidalon {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

/* stop */
.pedesanum-kidsavenub > .sl:checked ~ .vedum-bu > label > .vedum-kidalon,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-bu > label > .vedum-kidalon {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
}

/* calculate autoplay */
.pedesanum-kidsavenub > .vedum-de > label {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 12pt;
  line-height: normal;
  bottom: 50px;
  left: 20%;
  right: 20%;
  top: auto;
  z-index: 3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  color: #fff;
}
.pedesanum-kidsavenub > .vedum-de > label .vedum-lason {
  margidekus-bottom: 10px;
  font-size: 24px;
}
.pedesanum-kidsavenub > .vedum-de > label .vedum-de {
  font-size: 14px;
}
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ .vedum-de > .dekus-0 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-tesab-0:checked ~ .vedum-de > .dekus-0 > .vedum-de,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ .vedum-de > .dekus-0 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-munova-0:checked ~ .vedum-de > .dekus-0 > .vedum-de,
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ .vedum-de > .dekus-1 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-tesab-1:checked ~ .vedum-de > .dekus-1 > .vedum-de,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ .vedum-de > .dekus-1 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-munova-1:checked ~ .vedum-de > .dekus-1 > .vedum-de,
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ .vedum-de > .dekus-2 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-tesab-2:checked ~ .vedum-de > .dekus-2 > .vedum-de,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ .vedum-de > .dekus-2 > .vedum-lason,
.pedesanum-kidsavenub > #vedum-munova-2:checked ~ .vedum-de > .dekus-2 > .vedum-de {
  opacity: 1;
  visibility: visible;
}
.pedesanum-kidsavenub > .vedum-de > label > .vedum-lason {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  -webkit-transition: opacity .4s, visibility .4s;
  -moz-transition: opacity .4s, visibility .4s;
  transition: opacity .4s, visibility .4s;  
}
.pedesanum-kidsavenub > .vedum-de > label > .vedum-de {
  font-size: 0.8em;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: opacity .4s, visibility .4s;
  -moz-transition: opacity .4s, visibility .4s;
  transition: opacity .4s, visibility .4s;
}

/* calculate autoplay */
@-webkit-keyframes vedum-lason {
  4.065040650406504%, 33.333333333333336% { opacity: 1; z-index: 2; visibility: visible;}
  37.39837398373984% { opacity: 0; z-index: 2; visibility: hidden;}
  37.408373983739835%, 100% { z-index: 0; }
}
@-moz-keyframes vedum-lason {
  4.065040650406504%, 33.333333333333336% { opacity: 1; z-index: 2; visibility: visible;}
  37.39837398373984% { opacity: 0; z-index: 2; visibility: hidden;}
  37.408373983739835%, 100% { z-index: 0; }
}
@keyframes vedum-lason {
  4.065040650406504%, 33.333333333333336% { opacity: 1; z-index: 2; visibility: visible;}
  37.39837398373984% { opacity: 0; z-index: 2; visibility: hidden;}
  37.408373983739835%, 100% { z-index: 0; }
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-0 > .vedum-lason {
  -webkit-animation: vedum-lason 12300ms infinite -700ms ease;
  -moz-animation: vedum-lason 12300ms infinite -700ms ease;
  animation: vedum-lason 12300ms infinite -700ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-1 > .vedum-lason {
  -webkit-animation: vedum-lason 12300ms infinite 3400ms ease;
  -moz-animation: vedum-lason 12300ms infinite 3400ms ease;
  animation: vedum-lason 12300ms infinite 3400ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-2 > .vedum-lason {
  -webkit-animation: vedum-lason 12300ms infinite 7500ms ease;
  -moz-animation: vedum-lason 12300ms infinite 7500ms ease;
  animation: vedum-lason 12300ms infinite 7500ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-0 > .vedum-de {
  -webkit-animation: vedum-lason 12300ms infinite -700ms ease;
  -moz-animation: vedum-lason 12300ms infinite -700ms ease;
  animation: vedum-lason 12300ms infinite -700ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-1 > .vedum-de {
  -webkit-animation: vedum-lason 12300ms infinite 3400ms ease;
  -moz-animation: vedum-lason 12300ms infinite 3400ms ease;
  animation: vedum-lason 12300ms infinite 3400ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > .dekus-2 > .vedum-de {
  -webkit-animation: vedum-lason 12300ms infinite 7500ms ease;
  -moz-animation: vedum-lason 12300ms infinite 7500ms ease;
  animation: vedum-lason 12300ms infinite 7500ms ease;
}
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > label > .vedum-lason,
.pedesanum-kidsavenub > #vedum-pl:checked ~ .vedum-de > label > .vedum-de,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-de > label > .vedum-lason,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-de > label > .vedum-de {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
   
}

/* stop */
.pedesanum-kidsavenub > .sl:checked ~ .vedum-de > label,
.pedesanum-kidsavenub > .pa:checked ~ .vedum-de > label {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
}

@media
only screen and (max-width: 480px),
only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (max--moz-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (-o-max-device-pixel-ratio: 2/1) and (max-width: 480px),
only screen and (max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (max-resolution: 192dpi) and (max-width: 480px),
only screen and (max-resolution: 2dppx) and (max-width: 480px) {  
  .pedesanum-kidsavenub > .vedum-de,
  .pedesanum-kidsavenub > .vedum-bu {
  display: none;
  }
}

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

Построенный на HTML5, CSS3 для настройки в реальном времени, он поставляется с целым набором интересных функций, которые делают эту тему легко редактируемый и гибкой настройкой.

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

Демонстрация
05 Апреля 2019 Загрузок: 1 Просмотров: 1078 Комментариев: (0)

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

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

Оставь свой отзыв

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