Библиотека для создания каруселей Embla Carousel

Создание каруселей для сайта - довольно трудоемкий процесс. Данная библиотека позволяет эту задачу сильно упростить. От десятков других подобных библиотек, ее отличает несколько преимуществ:

• Отсутствие зависимостей от других библиотек/фреймворков при разработке
• Малый вес и высокая производительность библиотеки
• Кроссбраузерность

Из этого урока вы узнаете:

• Как создать простейшую карусель?
• Как создать карусель с кнопками навигации?
• Как создать вертикальную карусель?
• Дополнительные полезные опции

1) Как создать простейшую карусель?

Для начала, нам необходимо подключить библиотеку к проекту. Есть 2 способа:

• Установить через npm:

Для установки через npm необходимо в консоли ввести команду:

npm install embla-carousel --save

• Установить через CDN:

Для установки через CDN необходимо вставить перед закрывающим тегом body HTML документа следующий код:

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>

Ссылка: https://unpkg.com/embla-carousel/embla-carousel.umd.js

После подключения библиотеки можно приступать к созданию карусели. Для начала в тег body необходимо добавить стартовый HTML-шаблон.

Вместо текста в шаблоне добавим фотографии:

Здесь вместо текста мы добавили тег img, а в его атрибут src мы добавили ссылки на картинки с сервиса unsplash.

Ссылки на картинки:

• 👉 Фото 1
• 👉 Фото 2
• 👉 Фото 3

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

С HTML-шаблоном мы закончили. Теперь надо дописать немного стилей. В документации приводится такой CSS шаблон.

Этот шаблон тоже стоит немного доработать.

Здесь мы изменили следующее:

• Добавили цвет заднему фону
• Задали фиксированную ширину и высоту обертке карусели
• Свойством margin: auto выровняли карусель по центру по горизонтали
• Свойством margin-top: 100px немного спустили вниз карусель
• Задали закругления через свойство border-radius
• Растянули картинки на все доступное им пространство, задав им ширину и высоту 100%

Теперь наша карусель должна выглядеть так

Однако картинки не меняются, ведь мы ещё не добавили JavaScript на страницу. Создадим JavaScript файл и добавим туда такой код

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

Если теперь попробовать запустить проект, то вот что должно получиться (gif)

Вот мы и создали простейшую карусель за несколько минут, выглядит неплохо!

2) Как создать карусель с кнопками навигации?

Стартовый HTML-шаблон для такой карусели немного отличается.

Здесь мы добавили обертку контейнеру карусели и в ней добавили кнопки навигации. Снова вставим вместо текста картинки и получим такой код

Примечание: в кнопках кодовые символы ← и → означают стрелки влево и вправо соответственно

CSS-код будет почти таким же, как и в прошлой карусели за исключением пары моментов

В .embla__slide мы ограничили высоту слайдов до 475px, чтобы оставить 25px на стрелки. .embla__prev и .embla__next - это и есть стрелки. Их мы немного стилизовали и отцентровали.

JavaScript код тоже изменится

Теперь отслеживаем клик по кнопке и вызываем функции смены слайда из библиотеки после каждого клика. Также теперь мы привязываем слайдер не ко всей обертке карусели, а к .embla__viewport.

Результат должен получиться такой (gif)

3) Как создать вертикальную карусель?

В данном случае все тоже довольно просто. Вернемся к нашему измененному стартовому HTML-шаблону из первого пункта

И посмотрим на CSS код из первого пункта

Здесь нам нужно добавить к .embla__container свойство flex-direction: column. Оно отвечает за отображение элементов в столбец. Также необходимо объявить в контейнере фиксированную высоту. После изменений получится такой код

Чтобы всё заработало, осталось дописать JavaScript код. Он получается почти такой же, как и в первом пункте, но есть одно важное изменение.

Здесь в options мы добавили свойство axis: 'y'. Свойство axis отвечает за направление движения слайдов. Для создания вертикальной карусели необходимо, чтобы они двигались по оси y.

После всех изменений должна получиться такая вертикальная карусель:

4) Дополнительные полезные опции

Всего в одной статье не охватишь, а возможностей у этой библиотеки ещё множество. Есть очень полезные встроенные опции, которые можно прописывать рядом с loop и axis в JavaScript файле. Приведем некоторые из них:

• slidesToScroll - количество отображаемых слайдов
• draggable - включает/отключает возможность скроллить слайды мышкой или пальцем
• direction - определяет направление движения слайдов (rtl или ltr)
• loop - определяет, будут слайды повторяться или нет

Также есть полезные встроенные методы:

• scrollTo - переключиться на заданный слайд
• canScrollNext/canScrollPrev - определяет, существует ли следующий/предыдущий слайд или включен ли режим loop
• scrollProgress - отображает процент просмотренных слайдов
• slidesInView - отображает, сколько слайдов отображается за раз

Обязательно посетите сайт с официальной документацией и посмотрите некоторые примеры реализации каруселей - возможностей действительно очень много. Данной вам информации должно быть достаточно, чтобы начинать собирать свои простые слайдеры при необходимости. Если хотите делать более сложные - заходите на официальную документацию.

Советуем ознакомиться с официальной документацией данной библиотеки: https://www.embla-carousel.com/ - там вы сможете найти всю недостающую информацию.

Надеемся, что информация была актуальна и полезна. Изучайте и применяйте изученное в своих проектах.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel