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

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

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

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

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

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

HTML

Код

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%;
  }
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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