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

Простой адаптивный CSS слайдер карусель

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

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

У каждой карусели свой стиль, поэтому здесь по умолчанию выгладит так:

Установка:

HTML

В начале мы видим width: 70%; - это сделано для сжатие, что можно при установочном процессе убрать или выставить на 100%, чтоб по умолчанию сделать на всю ширину.

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

Код

<div style="width: 70%;">

<div class="pesuvana-kartinku">
  <ul class="karuselka-slaydera">
  <li>
  <h2>1. Категория скрипты для сайта</h2>
  <a href="ссылка" rel="" target="_blank"><img src="http://zornet.ru/_fr/79/s1323694.jpg" ></a>
  </li>
  <li>
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <a href="ссылка" rel="" target="_blank"><img src="http://zornet.ru/_fr/56/4073604.jpg" ></a>
  </li>
  <li>
  <h2>3. Категорий шаблоны сайта</h2>
  <a href="ссылка" rel="" target="_blank"><img src="http://zornet.ru/_fr/56/2195166.jpg" ></a>
  </li>
  <li>
  <h2>4. Стилистика дизайна</h2>
  <a href="ссылка" rel="" target="_blank"><img src="http://zornet.ru/_fr/56/6223379.jpg" ></a>
  </li>
  <li>
  <h2>5. Оформление сайта</h2>
  <a href="ссылка" rel="" target="_blank"><img src="http://zornet.ru/_fr/56/9266202.jpg" ></a>
  </li>
  </ul>
</div>

  </div>

CSS

Код

ul {
  margin: 0;
  padding: 0;
}

.pesuvana-kartinku {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.karuselka-slaydera {
  list-style: none;
  position: relative;
  width: 500%;

  object-fit: cover;
  overflow: hidden;
  -webkit-animation: pesuvana-kartinku 30s infinite;
  -moz-animation: pesuvana-kartinku 30s infinite;
  animation: pesuvana-kartinku 30s infinite;
}

.karuselka-slaydera > li {
  position: relative;
  float: left;
  width: 20%;
}

.pesuvana-kartinku img {
  display: block;
  width: 90%;
  height: 315px;
}

.pesuvana-kartinku h2 {
  position: absolute;
  color: #fff;
  background-color: rgba(21, 21, 21, 0.8);
  padding: 6px 10px 6px 10px;
  font-size: 21px;
  text-shadow: 0 1px 0 #0e0e0e;
  border-radius: 0px 5px 5px 0px;
}
@-moz-keyframes pesuvana-kartinku{
  0% { left:0; }
  11% { left:0; }
  12.5% { left:-100%; }
  23.5% { left:-100%; }
  25% { left:-200%; }
  36% { left:-200%; }
  37.5% { left:-300%; }
  48.5% { left:-300%; }
  50% { left:-400%; }
  61% { left:-400%; }
  62.5% { left:-300%; }
  73.5% { left:-300%; }
  75% { left:-200%; }
  86% { left:-200%; }
  87.5% { left:-100%; }
  98.5% { left:-100%; }
  100% { left:0; }
}

@-webkit-keyframes pesuvana-kartinku{
  0% { left:0; }
  11% { left:0; }
  12.5% { left:-100%; }
  23.5% { left:-100%; }
  25% { left:-200%; }
  36% { left:-200%; }
  37.5% { left:-300%; }
  48.5% { left:-300%; }
  50% { left:-400%; }
  61% { left:-400%; }
  62.5% { left:-300%; }
  73.5% { left:-300%; }
  75% { left:-200%; }
  86% { left:-200%; }
  87.5% { left:-100%; }
  98.5% { left:-100%; }
  100% { left:0; }
}

@keyframes pesuvana-kartinku{
  0% { left:0; }
  11% { left:0; }
  12.5% { left:-100%; }
  23.5% { left:-100%; }
  25% { left:-200%; }
  36% { left:-200%; }
  37.5% { left:-300%; }
  48.5% { left:-300%; }
  50% { left:-400%; }
  61% { left:-400%; }
  62.5% { left:-300%; }
  73.5% { left:-300%; }
  75% { left:-200%; }
  86% { left:-200%; }
  87.5% { left:-100%; }
  98.5% { left:-100%; }
  100% { left:0; }
}

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

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

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

19 Февраля 2020 Загрузок: 3 Просмотров: 1805 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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