Слайдер для карточки товара

На странице карточки товара, как правило, присутствует слайдер изображений товара. Рассмотрим процесс создания такой галереи.

Для реализации галереи используются два плагина jQuery. Первый плагин, который непосредственно решает задачу создания и управления галереей — Slick Slider. Второй инструмент  — довольно популярный плагин Fancybox. Он реализует функционал по созданию и отображению изображений, видео HTML контента на экран в виде модального окна.

Использование указанных плагинов предполагает наличие подключенной библиотеки  jQuery:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Установка и подключение плагинов

Скачаем и установим оба плагина по соответствующим ссылкам.

Slick Slider — http://kenwheeler.github.io/slick/

FancyBox — http://fancybox.net/

Плагин Slick Slider:

Подключение стилей для Slick Slider

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

Для плагина существует собственная тема стилей. Поэтому, в случае необходимости,  Вы можете подключить также эти стили:

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Подключение скрипта:

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Плагин FancyBox:

Подключение стилей:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Подключение скрипта:

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

Механизм работы галереи.

На первый взгляд может показаться, что в нашем примере реализован один слайдер Slick Slider. Но на самом деле таких слайдеров два.

Два слайдера соединены между собой через свойство asNavFor, в котором указываются соответствующие контейнеры слайдеров.

Код HTML

<div class="main-slider">
     <div>Контент слайда 1 </div>
     <div>Контент слайда 2 </div>
     …
     <div>Контент слайда 3 </div>
</div>

<div class="thumb-slider">
     <div>Контент слайда 1 </div>
     <div>Контент слайда 2 </div>
     …
     <div>Контент слайда 3 </div>
</div>

 Код JavaScript

$('.main-slider').slick({
     infinite: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     initialSlide: 1,
     arrows: true,
     nextArrow: '<span class="arrow-next"></span>',
     prevArrow: '<span class="arrow-prev"></span>',
     asNavFor: '.thumb-slider'
 });

$('.thumb-slider').slick({
     infinite: true,
     slidesToShow: 3,
     slidesToScroll: 1,
     arrows: false,
     focusOnSelect: false,
     asNavFor: '.main-slider',
     responsive: [
       {
           breakpoint: 768,
           settings: {
              swipe: true
           }
      }
     ]
 });