Подключение и настройка слайдера ResponsiveSlides
Для работы адаптивного слайдера требуется подключенная библиотека jQuery, ниже скрипта библиотеки добавьте внешний скрипт слайдера.
<script src="//atmpl.ru/design/adaptive-slider/2015/r-slides/responsiveslides.min.js"></script>
Стили слайдера могут быть добавлены в основной файл CSS или отдельный, мы использовали отдельный внешний файл для размещения в зоне <head>, страниц на которых будет работать слайдер.
<link rel="stylesheet" href="//atmpl.ru/design/adaptive-slider/2015/r-slides/responsiveslides.css">
Настройка опций слайдера
Слайдер обладает опциями настроек для изменения параметров вида и функциональности, Вы можете настроить показ слайдов по своему усмотрению внося изменения в скрипт управления слайдером.
<script>
$(".rslides").responsiveSlides({
auto: true, // Включить автовоспроизведение, true или false
speed: 500, // Скорость смены слайдов, значение ms
timeout: 4000, // Скорость перехода между слайдами, значение ms
pager: false, // Показать количество слайдов, true or false
nav: false, // Показать элементы навигации, true or false
random: false, // Включить смешивание, true or false
pause: false, // Включить паузу при наведении, true or false
pauseControls: true, // Включить паузу при наведении на элементы управления, true or false
prevText: "Previous", // Текст элемента предыдущий
nextText: "Next", // Текст элемента следующий
maxwidth: "", // Максимальная ширина слайдера
navContainer: "", // Селектор CSS управления навигацией
manualControls: "", // Селектор CSS элементов управления
namespace: "rslides", // Имя родительского элемента CSS
before: function(){}, // Кэлбэки :before
after: function(){} // Кэлбэки :after
});
</script>
Код для изображений слайдера
<ul class="rslides"> <li><img src="1.jpg" alt="Слайд 1"></li> <li><img src="2.jpg" alt="Слайд 2"></li> <li><img src="3.jpg" alt="Слайд 3"></li> </ul>
Подключенный слайдер
В примере используется только опция скорости смены слайдов.
<link rel="stylesheet" href="/design/adaptive-slider/2015/r-slides/responsiveslides.css">
<script src="/design/adaptive-slider/2015/r-slides/responsiveslides.min.js"></script>
<ul class="rslides">
<li><img src="/design/adaptive-slider/2015/r-slides/1.jpg" alt="Слайд 1"></li>
<li><img src="/design/adaptive-slider/2015/r-slides/2.jpg" alt="Слайд 2"></li>
<li><img src="/design/adaptive-slider/2015/r-slides/3.jpg" alt="Слайд 3"></li>
</ul>
<script>
$(function () {
$(".rslides").responsiveSlides({
speed: 1000
});
});
</script>
Стили для дополнительных элементов управления добавляются с использованием имени родителького элемента +
_tabs, например.rslides_tabs, требуется самостоятельное стилевое описание элементов.
Демо редактор слайдера ResponsiveSlides
Вы можете вносить свои изменения в код слайдера, дополнительно добавлены стили для опции "pager". Нажмите на значёк выполнения кода в поле редактора, внесите свои изменения и снова нажмите на выполнение, если страница результата не будет закрыта, после очередного изменения и выполнения данные на странице результата изменятся.