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

Для реализации галереи используются два плагина 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
}
}
]
});

СЕО Бизнес Маркетинг Аналитика