На странице карточки товара, как правило, присутствует слайдер изображений товара. Рассмотрим процесс создания такой галереи.
Для реализации галереи используются два плагина 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 } } ] });