Показать Меню
falbar Адаптивный слайдер

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

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

Когда часто приходиться ставить слайдеры на сайт парой хочется найти несколько вариантов, которые подходили бы к большинству проектов. Никто не хочет возиться с подключением и тратить время на изменение 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=""></li>
	<li><img src="2.jpg" alt=""></li>
	<li><img src="3.jpg" alt=""></li>
</ul>

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

<script type="text/javascript">
	$(function() {
		$(".rslides").responsiveSlides();
	});
</script>

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

$(".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(){}
});

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

Источник
responsiveslides.com

Подписаться на обновления

Комментариев еще не оставлено