Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

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

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (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 пикселей, хотя в ваших собственных проектах они могут быть другими.

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

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

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
Макет карусели на больших экранах

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

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

3. JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Еще проекты JavaScript для оживления ваших сайтов

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.