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

20 августа 2014 Антон Кулешов 1654 0

Когда часто приходиться ставить слайдеры на сайт парой хочется найти несколько вариантов, которые подходили бы к большинству проектов. Никто не хочет возиться с подключением и тратить время на изменение CSS стилей. ResponsiveSlides в переводе с английского отзывчивые слайды могут стать одним из таких вариантов.

Реклама

При работе с этим плагином, можно отметить три вещи:

  1. Простоту интеграция в HTML страницу;
  2. Адаптивность к разным расширениям;
  3. Много режимность, плагин легко настраивается под различные варианты работы.

Установка очень проста, и с этим вряд ли у кого возникнут проблемы. Сначала как обычно подключаем стили и скрипты плагина:

<link href="responsiveslides.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js" type="text/javascript"></script>

Теперь добавим HTML разметку на страницу:

<ul class="rslides">
	<li><img src="1.jpg" alt="image"></li>
	<li><img src="2.jpg" alt="image"></li>
	<li><img src="3.jpg" alt="image"></li>
</ul>

После всех этих действий останется только вызвать слайд шоу:

$(function(){
	$(".rslides").responsiveSlides();
});

Если необходимо настроить скорость, паузы, порядок слайдов, то можно воспользоваться опциями:

$(".rslides").responsiveSlides({
	auto: true,
	speed: 500,
	timeout: 4000,
	pager: false,
	nav: false,
	random: false,
	pause: false,
	pauseControls: true,
	prevText: "Previous",
	nextText: "Next",
	maxwidth: "",
	navContainer: "",
	manualControls: "",
	namespace: "rslides",
	before: function(){},
	after: function(){}
});

Как видно все опции поняты и не нуждаются в переводе. Так же этот плагин частенько обновляется на сайте разработчиков.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

О том, как я не очень «легко» коротал вечер в компании приложений Facebook

14 января 2016 Антон Кулешов

Миром овладели соцсети, а потому, мало кто станет регистрироваться на сайте или форуме, заполняя при этом кучу полей, добавляя аватарку и прочее. Дабы привлечь посетителей нам придется использовать API социальных сетей – где уже есть вся нужная нам информация для оформления профиля. Ранее мы уже рассматривали один из способов авторизации пользователя через «ВКонтакте», сегодня поговорим о Facebook.

Плавный скроллинг и плавающее меню

30 августа 2014 Антон Кулешов

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

Табы для сайта на jQuery

21 октября 2014 Антон Кулешов

После прочтения этой статьи вы узнаете, как сделать у себя на сайте красивые табы потратив на это пару минут.