Адаптивный слайдер · ResponsiveSlides

Адаптивный слайдер ResponsiveSlides

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

Подключение и настройка слайдера 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>

Подключенный слайдер

В примере используется только опция скорости смены слайдов.

  • Слайд 1
  • Слайд 2
  • Слайд 3

<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". Нажмите на значёк выполнения кода в поле редактора, внесите свои изменения и снова нажмите на выполнение, если страница результата не будет закрыта, после очередного изменения и выполнения данные на странице результата изменятся.

Скачать слайдер ResponsiveSlides

Скачать

Рейтинг: 5.0/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
13-01-2015 Михаил Меренков aTmpl © 1863 0 responsive, адаптивный, slider, Adaptive, слайдер