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

Что делать если для сайта нужен слайд-шоу который реагировал бы на разные размеры мониторов мобильных устройств? Для этого я использовал популярный плагин jQuery под названием ResponsiveSlides.js.

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

Настройка слайд-шоу

Сначала мы должны подключить все рекомендуемые файлы из хранилища. Загрузить копию с Github и захватить два файла из корневого источника responsiveslides.min.js и responsiveslides.css. В первом случае требуется фактически построить слайд-шоу, а последний стиль для окна изображения с навигацией и текстом заголовка.

Основные стили CSS добавлены в демонстрации, их лучше добавить в стили проекта, если вы хотите уменьшить количество независимых файлов CSS. Только убедитесь, что не переписаны свойства в документе. Теперь у нас есть 2-ва файла плагина, нам также нужно подключить копию последней библиотеки jQuery с поддержкой старых браузеров IE. Я подключил Google CDN, но вы можете скачать локальную версию вместо этого.

Плагин ищет неупорядоченный список элементов для показа. Слайды разделились и вращаются в соответствии с настройками плагина. Вот пример кода 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>

Можно сделать проще, используя только

<strong><img src=""></strong>

Я включил подписи, потому что мы можем задать этот запрос внутри метода плагина jQuery.

к меню ↑

ResponsiveSlides JQuery

Чтобы получить виджет анимации должным образом, нам просто нужно запустить один метод с плагином. Есть некоторые дополнительные параметры которые мы можем включить, но начинать с основ всегда легче. Это небольшой фрагмент кода с сайта ResponsiveSlides.js.

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

Обратите внимание, что они используют класс .rslides для контейнера слайд-шоу. Для демонстрационной страницы я использовал атрибут слайдера id #. Это значение списка элементов на странице. Но давайте посмотрим на некоторые параметры которые можно настроить. Это полный список, из документации.

$(".rslides").responsiveSlides({
  auto: true, // Boolean: Анимировать автоматически, true or 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: Текст для кнопки "previous"
  nextText: "Next", // String: Текст для кнопки "next"
  maxwidth: "", // Integer: Max-width в слайд-шоу, в пикселях
  navContainer: "", // Selector: Там, где должны быть добавлен контроль, по умолчанию после 'ul'
  manualControls: "", // Selector: Пагинатор навигации
  namespace: "rslides", // String: Изменение имен
  before: function(){}, // Function: До обратного вызова
  after: function(){} // Function: После обратного вызова
});

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

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

к меню ↑

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

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

/* slider styles */
.rslides { margin: 0 auto 40px; }

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.25);
  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);
  -webkit-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; }

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

<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+
к меню ↑

Заключение

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

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