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

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

20 августа 2014 3011 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