От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и на очереди у нас простой адаптивный слайдер — ResponsiveSlides.js. Попробуем познакомиться с документацией, а также установить и настроить слайдер ResponsiveSlides.js.
Итак, друзья, сегодня у нас на очереди один из моих любимых слайдеров — это слайдер ResponsiveSlides.js. Судя по названию, слайдер изначально адаптивный, и это на самом деле так, что является безусловным плюсом сегодня.
Кроме того, плагин ResponsiveSlides.js — это легковес. Текущая его версия (на момент написания статьи это версия 1.55) весит всего несколько килобайт. Что же мы получаем взамен расхода столь малого количества трафика? Полноценный слайдер, который имеет все необходимое: большое кол-во настроек, красивый эффект смены слайдов, элементы управления слайдами, ну и само-собой, адаптивность и совсем небольшой вес плагина.
Попробуем установить слайдер. Для этого нам необходимо скачать его с GitHub или же можете взять архив из исходников к уроку. Документация официального сайта подсказывает нам, что для работы слайдера необходима библиотека jQuery и, собственно, сам плагин responsiveslides.js (или его сжатая версия responsiveslides.min.js). Давайте подключим их.
|
1 2 3 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="responsiveslides.js"></script> |
Также нам понадобится разметка слайдера в виде простого списка:
|
1 2 3 4 5 6 |
<ul class="rslides"> <li><img src="images/nemo.jpg" alt=""></li> <li><img src="images/toystory.jpg" alt=""></li> <li><img src="images/up.jpg" alt=""></li> <li><img src="images/walle.jpg" alt=""></li> </ul> |
Следующим шагом нам предлагается добавить несколько стилевых правил, которые оформят наш слайдер. Чтобы не копировать стили с сайта, мы можем просто подключить файл стилей responsiveslides.css, который есть в архиве полученного ранее слайдера.
|
1 |
<link href="responsiveslides.css" rel="stylesheet"> |
Осталось инициализировать плагин всего одной строкой кода:
|
1 2 3 |
$(function() { $(".rslides").responsiveSlides(); }); |
После этого можем проверять результат работы в браузере. Если вы нигде не ошиблись, тогда на странице вы увидите простейший вариант слайдера, в котором слайды меняются с определенной периодичностью.
Уже неплохо, но не хватает элементов управления. Их несложно добавить опцией pager со значением true:
|
1 2 3 |
$(".rslides").responsiveSlides({ pager: true }); |
Стили для оформления навигационной панели я взял из документации, немного изменив их под светлое оформление страницы. Также можно использовать по своему усмотрению и другие настройки слайдера. Например, опция manualControls позволит реализовать навигационную панель, на которой вместо номеров слайдов будут их превью. Опция nav позволяет добавить навигационные стрелки в левой и правой частях слайдов. Опция speed дает возможность управлять скоростью анимации и т.д.
Пробуйте, экспериментируйте. Уверен, слайдер вам придется по душе. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
