ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой слайдер картинок на чистом CSS

Простой слайдер картинок на чистом CSS

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

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

Легкие и красивые адаптивный слайдер на CSS для сайта

Установка:

HTML

Код

CSS

Код

* {padding: 0; margin: 0;}

@keyframes slide {
  0% {left: 0%;}
  11% {left: 0%;}
  22% {left: -100%;}
  33% {left: -100%;}
  44% {left: -200%;}
  55% {left: -200%;}
  66% {left: -300%;}
  77% {left: -300%;}
  88% {left: -400%;}
  100% {left: -400%;}
}

.rewind-frames {overflow: hidden;}
.rewind-frames .pokazyvat-slayda {
  position: relative;
  width: 500%;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: slide ease 20s infinite;
}
.rewind-frames .pokazyvat-slayda img {
  width: 20%;
  height: 550px;
}

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

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

17 Августа 2020 Загрузок: 3 Просмотров: 1517 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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