Адаптивный слайдер на CSS с креативным эффектом

Слайдер без использования JavaScript с крутым эффектом перелистывания слайдов. Отлично адаптируется под любые устройства. Исходники в наличии.

Особенность: слайдер на CSS

Слайдер на чистом CSS — это готовый слайдер с автоматическим переключением слайдов без помощи JS-скриптов. Как правило, такой вид слайдеров ценится начинающими разработчиками или в том случае, когда нет возможности\необходимость подключать библиотеки.

Разумеется, проще воспользоваться специальными плагинами для создания слайдеров (таких очень много, на том же jQuery). Но данный слайдер соблазняет своим необычным эффектом перелистывания слайдов. При чем, с высокой производительностью.

Как использовать этот пример у себя на сайте

По ссылке выше, Вы можете скачать архив, в котором будет располагаться файл slider-css.html. Теоретически, все, что Вам необходимо для запуска слайдера на CSS на Вашем сайте, находится в этом файле. Вот Ваш алгоритм действий:

1. Копируем все стили блока слайдера, они находятся в теге

<style class="cp-pen-styles">
...
</style>

Обратите внимание, что контейнер .untitled имеет свойства position: absolute и возможно, Вам придется немного адаптировать его под себя.

2. Все слайды обернуты в

<div class="untitled">
	<div class="untitled__slides">
             ...
        </div>
</div>

3. В самом HTML-коде слайда разобраться несложно

<div class="untitled__slide">
    <div class="untitled__slideBg"></div>
    <div class="untitled__slideContent">
        <span>London</span>
        <span>Scout</span>
        <a class="button" href="https://unsplash.com/@scoutthecity" target="/black">Unsplash Profile</a>
    </div>
</div>

Текст, кнопка, ссылка.

4. Картинка для слайда задается в его бекграунде

.untitled__slide:nth-child(1) .untitled__slideBg {
  background-image: url(https://unsplash.it/g/1500/2200?image=838);
}

Если Вы понимаете принцип работы абсолютного позиционирования, то для настройки слайдера под себя у Вас уйдет не более 3 минут. Удачи!