Слайд шоу с помощью плагина Slides

Когда на сайте требуется сделать слайдер, всегда отдаю предпочтение jquery плагину slides (slidesjs.com). Простой в установке и настройке, работает четко. Нет такого, как у некоторых плагинов бывает нажимаешь быстро несколько раз на кнопку следующего слайда и они начинают пролистываться один за другим, пока не отработают количество кликов. Или в пагинаторе кликнешь на последнюю картинку, находясь на первой к примеру, то пролистаются все слайды, которые находятся между ними. Поведение плагина Slides в этих случаях противоположное, что на мой взгляд кажется более удобным, хотя, как говориться, на вкус и цвет все фломастеры разные…

Немного отвлекся на повествование о личных предпочтениях, но полезней будет рассказать об объективных преимуществах. Начнем с установки:

  1. Подключаем скрипт плагина, предварительно загрузив его на сервер, например:
     <script src="/js/slides.min.jquery.js"></script>

    Если у вас на сайте не была подключена  библиотека jquery, нужно ее подключить до плагина slides. Для этого можно загрузить скрипт на сервер либо воспользоваться сервисом Google:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. Создаем на странице html элементы:
    <div id="slides"><!-- на этот элемент будет навешана функция, инициализирующая слайдер -->
       <div class="slides_container"><!-- необходимый контейнер -->
          <!-- далее располагаем блочные элементы, которые впоследствии будут листаться -->
          <div><h1>Слайд 1</h1><p>Содержание слайда...</p></div>
          <div><h1>Слайд 2</h1><p>Содержание слайда...</p></div>
          <div><h1>Слайд 3</h1><p>Содержание слайда...</p></div>
       </div>
    </div>
  3. Прописываем стили для элементов. Важный момент — файл css должен подключаться до файла слайдера(slides.min.jquery.js).
    .slides_container {
        /* здесь задаем ширину слайдера */
        width:1000px;
        display:none;
    }
    .slides_container div { /* блочные элементы внутри слайдера (для нашего случая div'ы) */
        width:1000px; /* указываем ту же ширину */
        height:288px; /* и высоту слайдера */
    }
  4. Вставляем на страничку вызов функции слайдера:
    <script>
      $(function(){
        $("#slides").slides();
      });
    </script>

Пример слайдера

Слайд 1

Содержание слайда…

Слайд 2

Содержание слайда…

Слайд 3

Содержание слайда…

 

Вот и все, стандартный слайдер готов. Slides имеет параметры, с помощью которых можно более гибко настроить его под свои нужды:

  • preload (boolean)
    Загружать ли все изображения перед тем, как запустить слайдер. Может быть установлен в true или false.
    По умолчанию false.

    preload: true
  • preloadImage (string)
    путь до картинки, которая будет показана пока будет идти прелоад изображений в слайдер. Путь относительно корня сайта.
    По умолчанию «/img/loading.gif».

    preload: true,
    preloadImage: '/img/loading.gif'
  • container (string)
    класс для slides container/
    По умолчанию «slides_container».

    container: 'slides_container'
  • generateNextPrev (boolean)
    генерировать ли автоматически кнопки «назад», «вперед» («next», «prev»).
    По умолчанию false.

    generateNextPrev: true
  • next (string)
    Класс для кнопки следующий слайд (next).
    По умолчанию «next».

    next: 'next'
  • prev (string)
    Класс для кнопки предыдущий слайд (prev).
    По умолчанию «prev».

    prev: 'prev'
  • pagination (boolean)
    Если вы не используете пагинацию в слайдере, то можете поставить false, но это не рекомендуется.

    pagination: true
  • generatePagination (boolean)
    генерирует кнопки пагинации (ссылки на каждый слайд) автоматически.
    По умолчанию true.

    generatePagination: true
  • paginationClass (string)
    имя класса для блока пагинации.
    По умолчанию «pagination».

    paginationClass: 'pagination'
  • currentClass (string)
    имя класса для текущей активной ссылки в пагинации.
    По умолчанию «current».

    currentClass: 'current'
  • fadeSpeed (number)
    устанавливает скорость анимации для эффекта исчезновение (fade) в миллисекундах.
    По умолчанию 350 миллисекунд.

    fadeSpeed: 350
  • fadeEasing (string)
    устанавливает «ослабление» (easing ) анимации эффекта «исчезновения» (fade).
    Сработает только в том случае, если на сайте подключен плагин Easing.

    fadeEasing: "easeOutQuad"
  • slideSpeed (number)
    устанавливает скорость перелистывания слайдов в миллисекундах.
    По умолчанию 350 миллисекунд.

    slideSpeed: 350
  • slideEasing (string)
    дает возможность изменить анимацию, требует подключенного плагина»easing»
  • start (number)
    с какого слайда начинать показ.
    По умолчанию 1.

    start: 1
  • effect (string)
    устанавливает, какой эффект использовать при смене слайда. Доступные значения — «slide», «fade». Вы можете указать оба значения через запятую:

    effect: 'slide, fade'

    в этом случае первый эффект будет применен к переключению слайдов кнопками next, prev, а второй к переключению по нажатию на панели пагинации.
    По умолчанию slide.

  • randomize (boolean)
    слайды в случайном порядке.
    По умолчанию false.

    randomize: true
  • randomize (boolean)
    слайды в случайном порядке.
    По умолчанию false.

    randomize: true
  • play (number)
    если значение установлено, слайдер будет прокручиваться автоматически с интервалом, равным значению. Интервал задается в миллисекундах, то есть

    play: 3000

    будет менять слайд каждые 3 секунды. При нулевом значении автопрокрутка отключена.
    По умолчанию 0 (false).

  • pause (number)
    при ненулевом значении будет установлена пауза после нажатия на кнопку next/prev, равная значению в миллисекундах.
    По умолчанию 0 (false).

    pause: 5000
  • hoverPause (boolean)
    устанавливает задержку смены слайдов, когда мышка находится над слайдером.
    По умолчанию false.

    hoverPause: true

Похожие статьи

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Отзывы : 10 комментариев

  1. Описание — здоровское, жаль картинок не прилагается.., я просто, смутно представляю, что представляет из себя плагин в готовом виде…. =(

  2. Подскажите, а существует ли возможность показывать за один раз несколько картинок. И каким образом это можно осуществить? Спасибо!

    • Можно попробовать сделать это средствами css, либо воспользоваться другим плагином, например bxslider (bxslider.com/options). У него есть опции для создания карусели: minSlides, maxSlides, moveSlides.

  3. Здравствуйте. А где код скриптов самого слайдера. Зашла на slidesjs.com, взяла скрипты jquery.slides.coffee, jquery.slides.js, jquery.slides.min.js. Не работает.

    • Здравствуйте
      Нужно в шапке вашего сайта подключить jquery, затем файл плагина jquery.slides.js, далее следует инициировать слайдер на нужном элементе. Для этого в js скрипте вызовите метод slidesjs, например
      $(‘#some_element’).slidesjs();

Комментирование отключено