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