Как создать привлекательную отзывчивую галерею изображений с помощью slick.js

() translation by (you can also view the original English article)

В этом руководстве мы будем использовать популярный jQuery плагин slick.js, чтобы создать привлекательную отзывчивую галерею изображений. Вот галерея, которую мы собираемся создать:

Обязательно посмотрите полноэкранную версию и измените размер окна браузера, чтобы увидеть, как изменяется макет в зависимости от размера экрана.

Что такое slick.js?

Slick.js - хорошо известный плагин jQuery, созданный Кеном Уилером, который позволяет создавать красивые отзывчивые слайдеры. Чтобы лучше понять, что может предложить этот плагин, ознакомьтесь с документацией.

К счастью, он работает не только во всех современных браузерах, но и в более старых, таких как IE 8+.

Наконец, вы можете взглянуть на версию для WordPress.

Начало работы с slick.js

Чтобы начать работу с slick, начните с загрузки и установки следующих файлов в вашем проекте:

jQuery (≥1.7)
slick.css или его минифицированная версия
Slick.js или его минифицированная версия

При желании вы можете импортировать файл slick-theme.css.

Вы можете получить копию соответствующих файлов, посетив репозиторий Github, используя диспетчер пакетов (например, npm) или загрузив необходимые ресурсы через CDN (например, cdnjs). В этом руководстве я использую последний вариант.

Кроме того, я включил Babel для компиляции кода ES6 до ES5 и Lodash для использования функции debounce (мы будем использовать это позже).

Имея это в виду, если вы посмотрите на вкладку Settings нашего демо в codepen, вы увидите, что я включил один внешний CSS-файл и три внешних файла JavaScript.

CSS settings on CodePen — CSS настройки в CodePen

JavaScript settings on CodePen — Настройки JavaScript в CodePen

1. HTML

На этом этапе важно понять структуру нашей страницы. Самое главное, мы определим две карусели, которые имеют одинаковые изображения и синхронизированы (как - мы обсудим позже). Размеры изображения составляют 860 x 550 пикселей, хотя в ваших собственных проектах они могут быть другими.

Наконец, в качестве части второй карусели мы укажем стрелки навигации, а также элемент, который отслеживает общее количество слайдов.

Вот необходимая структура для нашей демонстрационной страницы:

<div class="loading">Carousel is loading...</div>
 <div class="container">
   <div class="synch-carousels">
   
     <div class="left child">
       <div class="gallery">
         <div class="item">
           <img src="IMG_SRC" alt="">
         </div>
         <!-- 4 more images here -->
       </div>
     </div><!--/left-->
     
     <div class="right child">
       <div class="gallery2">
         <div class="item">
           <img src="IMG_SRC" alt="">
         </div>
         <!-- 4 more images here -->
       </div>
       <div class="nav-arrows">
         <button class="arrow-left">
           <!--svg here-->
         </button>
         <button class="arrow-right">
           <!--svg here-->
         </button>
       </div>
       <div class="photos-counter">
         <span></span><span></span>
       </div>
     </div><!--/right-->
     
   </div>
 </div>

2. CSS

В общей сложности наша галерея должна иметь четыре разных вида, в зависимости от размера окна просмотра. Давайте сделаем их, следуя подходу mobile-first.

Когда окно браузера меньше 480 пикселей, оно будет выглядеть так, что видно только вторую карусель и навигационную панель:

The carousel layout on extra small screens — Макет карусели на экстра маленьких экранах

Затем на экранах между 480px и 768px она должна выглядеть следующим образом, два эскиза под основным слайдом:

The carousel layout on small screens — Макет карусели на маленьких экранах

Далее, на экранах между 769px и 1023px, мы представим третий эскиз:

Наконец, на больших экранах (≥1024px), она должна выглядеть следующим образом, миниатюры появляются сбоку (обратите внимание, что они не полностью соответствуют этому изображению):

The carousel layout on large screens — Макет карусели на больших экранах

Все приведенные выше случаи сделаны в медиа-запросах, показанных ниже:

.synch-carousels {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
 .synch-carousels > * {
   width: 100%;
 }
 
 .synch-carousels .right {
   order: -1;
 }
 
 .synch-carousels .left {
   overflow: hidden;
 }
 
 .synch-carousels .gallery {
   display: none;
 }
 
 .synch-carousels .gallery .slick-list {
   height: auto !important;
   margin: 0 -20px;
 }
 
 .synch-carousels .gallery .slick-slide {
   margin: 0 20px;
 }
 
 @media screen and (min-width: 480px) {
   .synch-carousels .right {
     margin-bottom: 20px;
   }
 
   .synch-carousels .gallery {
     display: block;
   }
 }
 
 @media screen and (min-width: 1024px) {
   .synch-carousels .right {
     position: relative;
     width: calc(100% - 230px);
     margin-bottom: 0;
     order: 2;
   }
 
   .synch-carousels .left {
     width: 210px;
   }
 
   .synch-carousels .gallery .slick-slide {
     margin: 0 0 20px 0;
   }
 
   .synch-carousels .gallery .slick-list {
     margin: 0;
   }
 }

Обратите внимание на правило !important. Оно переопределяет встроенный стиль.

3. JavaScript

Давайте теперь обратим наше внимание на вещи, связанные с JavaScript.

Кэширование селекторов

Когда DOM готов, хорошей практикой будет кэшировать некоторые часто используемые селекторы:

1	const $left = $(".left");
2	const $gl = $(".gallery");
3	const $gl2 = $(".gallery2");
4	const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

Инициализация каруселей

Затем мы инициализируем и синхронизируем наши две карусели. Код, отвечающий за это, выглядит следующим образом:

$gl.slick({
   rows: 0,
   slidesToShow: 2,
   arrows: false,
   draggable: false,
   useTransform: false,
   mobileFirst: true,
   responsive: [
     {
       breakpoint: 768,
       settings: {
         slidesToShow: 3
       }
     },
     {
       breakpoint: 1023,
       settings: {
         slidesToShow: 1,
         vertical: true
       }
     }
   ]
 });
 
 $gl2.slick({
   rows: 0,
   useTransform: false,
   prevArrow: ".arrow-left",
   nextArrow: ".arrow-right",
   fade: true,
   asNavFor: $gl
 });

Несомненно, лучший способ понять, как работает этот код, это прочитать документацию по slick. Однако, позвольте мне объяснить здесь две важные вещи:

Опция конфигурации asNavFor позволяет нам синхронизировать карусели и использовать одну как навигацию для другой.
По умолчанию slick использует преобразования CSS. Однако, в нашем случае мы отключили их, установив useTransform: false. Это происходит потому, что они вызывают небольшое мерцание в первом слайде первой карусели на больших экранах (мы могли бы отключить их только для первой карусели).

Отображение и настройка макета галереи

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

1	<div class="loading">Carousel is loading...</div>

На этом этапе мы должны снова подумать о желаемом макете галереи на больших экранах. Если вы посмотрите на соответствующие скриншоты, вы заметите, что обе карусели имеют одинаковые высоты. Чтобы достичь желаемого поведения, мы должны написать собственный код JavaScript (после нашего CSS). Этот код будет динамически устанавливать высоту первой карусели, равной высоте второй (или наоборот).

Зная вышеприведенные требования, вот код, который запускается, когда вся страница готова:

$(window).on("load", () => {
   handleCarouselsHeight();
   setTimeout(() => {
     $(".loading").fadeOut();
     $("body").addClass("over-visible");
   }, 300);
 });

И вот объявление функции handleCarouselsHeight:

function handleCarouselsHeight() {
   if (window.matchMedia("(min-width: 1024px)").matches) {
     const gl2H = $(".gallery2)").height();
     $left.css("height", gl2H);
   } else {
     $left.css("height", "auto");
   }
 }

Когда страница загружается, галерея отлично работает. Но она также должна работать так, как ожидается, когда окно браузера будет изменено.

Код, относящийся к этой конкретной ситуации, показан ниже:

$(window).on(
   "resize",
   _.debounce(() => {
     handleCarouselsHeight();
   }, 200)
 );

Обратите внимание, что обработчик события завернут внутрь функции debounce. Это Lodash функция, которая помогает нам ограничить количество вызовов этого обработчика.

Работа с событиями и методами slick

Теперь, когда мы успешно реализовали основные функции нашей галереи, давайте сделаем еще один шаг и создадим несколько дополнительных вещей.

Во-первых, в верхнем правом углу второй карусели мы показываем текущий слайд и общее количество слайдов.

Displaying the current slide and the total number of slides — Отображение текущего слайда и общего количества слайдов

Для этого мы используем события slick init и afterChange.

Вот соответствующий код:

/*you have to bind init event before slick's initialization (see demo) */
 gl2.on("init", (event, slick) => {
   $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
   $(".photos-counter span:nth-child(2)").text(slick.slideCount);
 });
 
 $gl2.on("afterChange", (event, slick, currentSlide) => {
   $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
 });

В качестве дополнительного улучшения каждый раз, когда мы нажимаем на слайд первой карусели, связанный с ним слайд второй карусели должен быть активным. Благодаря методу slickGoTo от slick мы можем реализовать эту функциональность.

Вот соответствующий код:

1	$(".gallery .item").on("click", function() {
2	const index = $(this).attr("data-slick-index");
3	$gl2.slick("slickGoTo", index);
4	});

4. Поддерживаемые браузеры

Это демо должно хорошо работать во всех последних браузерах, и вы спокойно можете использовать его в своих проектах.

Я столкнулся только с одной небольшой ошибкой в некоторых браузерах (Firefox, Edge) при тестировании демо на больших экранах. Когда вы нажимаете на стрелки навигации, все слайды первой карусели, кроме первой, не достигают верхнего края их родителя и оставляют зазор в один пиксель:

Slick leaves one pixel bug on some browsers — Однопиксельная ошибка Slick в некоторых браузерах

И последнее, но не менее важное: небольшие изменения и настройки могут потребоваться по мере изменения размера окна в зависимости от ваших потребностей.

Заключение

В этом руководстве мы использовали slick.js и смогли создать красивую отзывчивую галерею. Надеюсь, теперь вы готовы попробовать эту реализацию в своих проектах. Если это произойдет, не стесняйтесь делиться ссылкой на проект в комментариях ниже!