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

Адаптивный слайдер на чистом CSS3

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

Так вот, что хотелось донести, что большинство этих веб-сайтов используют фреймворк, такой, как JQuery. Если думаете, что они используют bootstrap, то я хочу сообщить вам, что Bootstrap также работает с JQuery. Если вы начинающий веб мастер, и мало знаете о JQuery, и просто хотите простой слайдер. Тогда этот пост будет очень информативным и полезным для вас. Так как здесь простой и адаптивный слайдер, который использует HTML и CSS, а также без JavaScript или каких-либо рамок или библиотек.

Слайд идет с авто запуском, или другими словами, этот слайдер воспроизводится или запускается автоматически без JavaScript. На этом слайдере есть текст, вы также можете размещать изображения, которое аналогично будет работать на карусели, пока сами ее не отключите в стилистике CSS. Эта программа очень проста для понимания и изменения. Даже новичок может изменить эту чистую программу-слайдер CSS.

Примерно в реальности, как этот слайдер смотрится, где просматриваем с монитора.

Интересный и одновременно простой слайдер на чистом CSS

Как можно заметить, что формат по размеру изменился, так этот вид планшета или смартфона.

Адаптивный слайдер карусель с плавным эффектом

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

Слайдер карусель с эффектами на HTML5 и CSS3

Слайдер карусель с эффектами на HTML5 и CSS3

Установка:

HTML

Код

<div class='basgabmu-elowmics'>
  <input name="input-basgabmu-elowmics" id='input-kecavacub-0' type="radio" class='input-kecavacub input-kecavacub-num' >
  <input name="input-basgabmu-elowmics" id='input-kecavacub-1' type="radio" class='input-kecavacub input-kecavacub-num' >
  <input name="input-basgabmu-elowmics" id='input-kecavacub-2' type="radio" class='input-kecavacub input-kecavacub-num' >
  <input name="input-basgabmu-elowmics" id='input-kecavacub-3' type="radio" class='input-kecavacub input-kecavacub-num' >
  <input name="input-basgabmu-elowmics" id='input-kecavacub-autoplay' type="radio" class='input-kecavacub' checked>
  <ul>
  <li class='nekaenum-0'></li>
  <li class='nekaenum-1'></li>
  <li class='nekaenum-2'></li>
  <li class='nekaenum-3'></li>
  </ul>
  <div class='nekaenum-description'>
  <label class='nekaenum-0'>
  <h1 class="text-kecavacub">Слайдер CSS #1</h1>
  </label>
  <label class='nekaenum-1'>
  <h1 class="text-kecavacub">Слайдер CSS #2</h1>
  </label>
  <label class='nekaenum-2'>
  <h1 class="text-kecavacub">Слайдер CSS #3</h1>
  </label>
  <label class='nekaenum-3'>
  <h1 class="text-kecavacub">Слайдер CSS #4</h1>
  </label>
  </div>
  <div class='basgabmu-elowmics-arrow-prev'>
  <label class='nekaenum-0' for='input-kecavacub-0'></label>
  <label class='nekaenum-1' for='input-kecavacub-1'></label>
  <label class='nekaenum-2' for='input-kecavacub-2'></label>
  <label class='nekaenum-3' for='input-kecavacub-3'></label>
  </div>
  <div class='basgabmu-elowmics-arrow-next'>
  <label class='nekaenum-0' for='input-kecavacub-0'></label>
  <label class='nekaenum-1' for='input-kecavacub-1'></label>
  <label class='nekaenum-2' for='input-kecavacub-2'></label>
  <label class='nekaenum-3' for='input-kecavacub-3'></label>
  </div>
  <div class='basgabmu-elowmics-dot'>
  <label class='nekaenum-0' for='input-kecavacub-0'></label>
  <label class='nekaenum-1' for='input-kecavacub-1'></label>
  <label class='nekaenum-2' for='input-kecavacub-2'></label>
  <label class='nekaenum-3' for='input-kecavacub-3'></label>
  </div>
  </div>

CSS

Код

.basgabmu-elowmics{
  height: 25vw;
  overflow: hidden;
}

.basgabmu-elowmics > ul {
  height: 100%;
  z-index: 100;
}
.basgabmu-elowmics > ul > li{
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  opacity: 0;
  z-index: 1;
  transition: all 2000ms ease;
}
.basgabmu-elowmics > #input-kecavacub-0:checked ~ ul > li.nekaenum-0,
.basgabmu-elowmics > #input-kecavacub-1:checked ~ ul > li.nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-2:checked ~ ul > li.nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-3:checked ~ ul > li.nekaenum-3{
  opacity: 1;
  z-index: 2;
}
.basgabmu-elowmics > ul > li.nekaenum-0{
  background-color: #ab47ed;
}
.basgabmu-elowmics > ul > li.nekaenum-1{
  background-color: #4c4694;
}
.basgabmu-elowmics > ul > li.nekaenum-2{
  background-color: #106069;
}
.basgabmu-elowmics > ul > li.nekaenum-3{
  background-color: #116910;
}

.basgabmu-elowmics > .basgabmu-elowmics-arrow-prev,
.basgabmu-elowmics > .basgabmu-elowmics-arrow-next {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 300;
}
.basgabmu-elowmics > .basgabmu-elowmics-arrow-prev > label,
.basgabmu-elowmics > .basgabmu-elowmics-arrow-next > label {
  position: absolute;
  width: 5vw;
  height: 5vw;
  margin-top: -2.5vw;
  opacity: 0;
  background-size: 100% auto;
  background-position: center;

  z-index: -1;
  transition: all 0.5s ease;
}
.basgabmu-elowmics > #input-kecavacub-0:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-3,
.basgabmu-elowmics > #input-kecavacub-0:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-1:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-0,
.basgabmu-elowmics > #input-kecavacub-1:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-2:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-2:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-3,
.basgabmu-elowmics > #input-kecavacub-3:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-3:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-0 {
  z-index: 1;
}

.basgabmu-elowmics > .basgabmu-elowmics-dot {
  position: relative;
  margin-top: -4vw;
  text-align: center;
  z-index: 300;
  font-size: 0;
}
.basgabmu-elowmics > .basgabmu-elowmics-dot > label {
  position: relative;
  display: inline-block;
  margin: 1vw 0.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;

  background-color: #f0f3f0;
}
.basgabmu-elowmics > #input-kecavacub-0:checked ~ .basgabmu-elowmics-dot > label.nekaenum-0,
.basgabmu-elowmics > #input-kecavacub-1:checked ~ .basgabmu-elowmics-dot > label.nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-2:checked ~ .basgabmu-elowmics-dot > label.nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-3:checked ~ .basgabmu-elowmics-dot > label.nekaenum-3 {
  background-color: black;
}
.basgabmu-elowmics > .basgabmu-elowmics-dot > label:hover{
  background-color: #ec2f32 !important;
}
.basgabmu-elowmics > .nekaenum-description{
  position: absolute;
  width: 50%;
  top: calc(50% - 3vw);
  left: 25%;
  z-index: 200;
}
.basgabmu-elowmics > .nekaenum-description > label{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;

  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease;
}
.basgabmu-elowmics > #input-kecavacub-0:checked ~ .nekaenum-description > .nekaenum-0,
.basgabmu-elowmics > #input-kecavacub-1:checked ~ .nekaenum-description > .nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-2:checked ~ .nekaenum-description > .nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-3:checked ~ .nekaenum-description > .nekaenum-3{
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
.basgabmu-elowmics > .nekaenum-description > label > .text-kecavacub{
  margin: 0 auto;
  line-height: 6vw;
  text-align: center;
}

@keyframes slide{
  0%, 100% { opacity: 0; }
  6%, 25% { opacity: 1; z-index: 2; }
  30%, 50% { opacity: 0; z-index: 2; }
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ ul > li.nekaenum-0{
  animation: slide 32000ms infinite -2000ms linear;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ ul > li.nekaenum-1{
  animation: slide 32000ms infinite 6000ms linear;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ ul > li.nekaenum-2{
  animation: slide 32000ms infinite 14000ms linear;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ ul > li.nekaenum-3{
  animation: slide 32000ms infinite 22000ms linear;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ ul > li{
  transition: none;
}

@keyframes arrow {
  0%, 24% { z-index: 1; }
  25%, 100% { z-index: -1; }
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-3,
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-1{
  animation: arrow 32000ms infinite -2000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-0,
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-2{
  animation: arrow 32000ms infinite 6000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-1,
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-3{
  animation: arrow 32000ms infinite 14000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-prev > label.nekaenum-2,
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-arrow-next > label.nekaenum-0{
  animation: arrow 32000ms infinite 22000ms;
}

@keyframes dot {
  0%, 24% { background-color: #2d2b2b; }
  25%, 100% { background: #f9f9f9; }
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-dot > label.nekaenum-0{
  animation: dot 32000ms infinite -2000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-dot > label.nekaenum-1{
  animation: dot 32000ms infinite 6000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-dot > label.nekaenum-2{
  animation: dot 32000ms infinite 14000ms;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .basgabmu-elowmics-dot > label.nekaenum-3{
  animation: dot 32000ms infinite 22000ms;
}

@keyframes description{
  0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
  6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
  25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .nekaenum-description > .nekaenum-0{
  animation: description 32000ms infinite -2000ms ease;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .nekaenum-description > .nekaenum-1{
  animation: description 32000ms infinite 6000ms ease;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .nekaenum-description > .nekaenum-2{
  animation: description 32000ms infinite 14000ms ease;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .nekaenum-description > .nekaenum-3{
  animation: description 32000ms infinite 22000ms ease;
}
.basgabmu-elowmics > #input-kecavacub-autoplay:checked ~ .nekaenum-description > label{
  transition: none;
}

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

Где отлично выстроили все как нужно по дизайну, но с начало успешно создали слайдер в чистом HTML и CSS. Если у вас есть какие-либо сомнения или вопрос, прокомментируйте ниже, где также закреплена demo страница, где представляется просмотр до установки.

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

29 Июня 2019 Просмотров: 1523 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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