css слайдер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

645 просмотров
В поисках шаблона для сайта?