» »

Самый простой слайдер карусель на CSS

Самый простой слайдер карусель на CSS

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

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

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

Так реально выглядит после установки:

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

HTML

Код
<div id="posiblepons-managemean">
  <div>
  <img src="Ссылка на изображение №1" alt="Ключевое слово">
  </div>
  <div>
  <img src="Ссылка на изображение №2" alt="Ключевое слово">
  </div>
  <div>
  <img src="Ссылка на изображение №3" alt="Ключевое слово">
  </div>
  <div>
  <img src="Ссылка на изображение №4" alt="Ключевое слово">
  </div>
</div>

CSS

Код
div#posiblepons-managemean {
  overflow: hidden;
  margin: auto;
  width: 50%;
  max-width: 700px;
  max-height: 400px;
}
div#posiblepons-managemean div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}
div#posiblepons-managemean div img {
  width: 20%;
  float: left;
}
@keyframes slider {
  0% {
  left: 0%;
  }
  20% {
  left: 0%;
  }
  25% {
  left: -100%;
  }
  45% {
  left: -100%;
  }
  50% {
  left: -200%;
  }
  70% {
  left: -200%;
  }
  75% {
  left: -300%;
  }
  95% {
  left: -300%;
  }
}

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

Демонстрация
2019-01-29 Загрузок: 1 Просмотров: 310 Комментарий: (0)

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

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

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