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

Адаптивный слайдер имеет широкий диапазон поддержки старых браузеров, и выглядит красиво даже на смартфонах. Плагин ResponsiveSlides.js с открытым исходным кодом, и хорошо реагирует на разные размеры мобильных устройств.

Оглавление:
  1. Приступая к работе
  2. Настройки плагина
  3. Собираем все вместе
  4. Заключение

демо

Приступая к работе

Сначала к веб-странице нужно подключить файлы.

  1. jQuery с поддержкой старых браузеров IE.
  2. responsiveslides.min.js — создаст слайд-шоу.
  3. responsiveslides.css — для оформления внешнего вида слайд-шоу.

Основные стили добавлены в демонстрацию, если вы хотите уменьшить количество запросов http, их лучше добавить в стили проекта. Только убедитесь, что не совпадают название классов.

К началу

Настройки плагина

Для показа картинок, плагин ищет список элементов.

HTML

<div class="callbacks_container">
  <ul class="rslides" id="slider">
   <li>
     <img src="images/01.png" alt="">
     <p class="caption">Bar Interior <a href="#" target="_blank">(source)</a></li></p>
   </li>
   <li>
     <img src="images/02.png" alt="">
     <p class="caption">Preparing dinner in the house <a href="#" target="_blank">(source)</a></p>
   </li>
   <li>
     <img src="images/03.png" alt="">
     <p class="caption">James Madison mansion <a href="#" target="_blank">(source)</a></p>
   </li>
   <li>
     <img src="images/04.png" alt="">
     <p class="caption">some nice leather couches <a href="#" target="_blank">(source)</a></p>
   </li>
 </ul>
</div>

Чтобы слайдер начал работать нужен всего один метод. Обратите внимание, что для контейнера слайд-шоу используются класс .rslides.

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

Но давайте посмотрим на параметры, которые можно настроить. Это полный список из документации!

$(".rslides").responsiveSlides({
  auto: true, // Boolean: автозапуск анимации true/false
  speed: 500, // Integer: переходы в миллисекундах
  timeout: 4000, // Integer: сменой слайдов в миллисекундах
  pager: false, // Boolean: показать пагинатор true/false
  nav: false, // Boolean: показывать элементы навигации true/false
  random: false, // Boolean: случайный порядок слайдов true/false
  pause: false, // Boolean: пауза при наведении курсора true/false
  pauseControls: true, // Boolean: пауза управления true/false
  prevText: "Previous", // String: Текст для кнопки назад
  nextText: "Next", // String: Текст для кнопки делее
  maxwidth: "", // Integer: максимальная ширтна в пикселях
  navContainer: "", // Selector: где должен быть добавлен контроль, по умолчанию после ul
  manualControls: "", // Selector: пагинатор навигации
  namespace: "rslides", // String: изменение класса
  before: function(){}, // Function: до обратного вызова
  after: function(){} // Function: после обратного вызова
});

Последние два параметра функции обратного вызова. Они будут снимать события, которые происходят до и после некоторых типов анимации в виджете. Вы можете использовать это для настройки других параметров на странице, обновить ссылки, реорганизации содержания, и т.д. Это очень активный плагин с большими возможностями.

Некоторые из наиболее интересных вариантов в верхней части списка. Вы можете настроить скорость, тайм-аут, и стиль навигации (если таковые имеются). ResponsiveSlides имеет два основных стиля, навигация с помощью стрелок влево/вправо, и нижнюю панель для навигации. Оба метода работают безупречно на мобильных устройствах.

К началу

Собираем все вместе

Чтобы вид вписывался в содержание, может понадобиться изменить некоторые свойства CSS. Особенно актуально, если вы обновили пункты  ul добавив новые классы.

/* стили слайдера */
.rslides { 
  margin: 0 auto 40px; 
}

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);

  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
     -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
          box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);

  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.rslides_tabs li { 
  display: inline; 
  float: none; 
  margin-right: 1px; 
}

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
}

.rslides_tabs li:first-child { 
  margin-left: 0; 
}

.rslides_tabs .rslides_here a { 
  background: rgba(255,255,255,.1); 
  color: #fff; 
  font-weight: bold; 
}

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

JavaScript из демо:

<script type="text/javascript">
$(document).ready(function(){
  $("#slider").responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 450,
    namespace: "callbacks",
    before: function () {
      $('.events').append("<li>before event fired.</li>");
    },
    after: function () {
      $('.events').append("<li>after event fired.</li>");
    }
  });
});
</script>

Я рекомендую использовать ResponsiveSlides.js для любого проекта. Этот плагин поддерживается всеми браузерами.

Поддержка браузерами ResponsiveSlides
IE Chrome Opera Safari Firefox Android iOS
6+
К началу

Заключение

Я надеюсь что этот материал будет полезен для веб-разработчиков. Потому что создавать свой собственный код библиотеки с нуля, придумывая велосипед заново, лишняя трата времени. В основном веб-строительство делается из уже существующих решений с открытым исходным кодом и является самым быстрым и простым способом для расширения веб-сайта.

Адаптивный слайдер — хороший плагин и стоит внимания. Если вы решили создать веб-проект, который требует адаптивный дизайн, рассмотрите вопрос о включении этих кодов в шаблон. Вы можете захватить копию исходного кода, который содержит демонстрационная страница.