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

Адаптивный слайдер изображения с надписями

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

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

Так реально будет выводить кадры с названием, что перекреплены:

Слайдер для сайта в светлом виде на CSS3

Приступаем к установке:

HTML

Код

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="storingentry-information">
  <figure class="instructions">
  <figure>
  <img src="http://zornet.ru/_fr/56/s0552961.jpg" alt>
  <figcaption>Переименуйте свою форму</figcaption>
  </figure>
  <figure>
  <img src="wanaka-drowned-tree.jpg" alt>
  <figcaption>Вы можете отключить сохранение</figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/56/s3553927.jpg" alt>
  <figcaption>Utah, United States</figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/56/s8240346.jpg" alt>
  <figcaption>Настройте уведомления о своей контактной</figcaption>
  </figure>
  <figure>
  <img src="http://zornet.ru/_fr/56/s0650714.jpg" alt>
  <figcaption>Уведомления - отличный способ</figcaption>
  </figure>
  </figure>
</div>

CSS

Код

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}
body, figure {
  margin: 0; background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#storingentry-information {
  width: 100%; overflow: hidden;
}
figure.instructions {
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite;
}
figure.instructions figure {
  width: 19.8%; height: auto;
  display: inline-block; position: inherit;
}
figure.instructions img { width: 100%; height: auto; }
figure.instructions figure figcaption {
  position: absolute; bottom: 0;
  background: rgba(19, 18, 18, 0.44);
  color: #f5f5f5; width: 100%;
  font-size: 3rem; padding: .6rem;
}

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

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

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

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

06 Июля 2018 Загрузок: 2 Просмотров: 1324 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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