Swiper на Vue.js с веб-компонентами

Swiper – одна из лучших библиотек для создания слайдеров (более 39 тысяч звезд на GitHub не дадут соврать). Она имеет большое количество возможностей, настроек и постоянно развивается. Поэтому я давно использую её в своей работе.

Поскольку в последнее время я активно верстаю на Vue.js (3-я версия с setup), то использовал соответствующие компоненты Swiper Vue.

Начиная с 10-й версии Swiper на странице для Vue появилось предупреждение о том, что в будущих версиях, скорее всего, компоненты Swiper Vue будут удалены и вместо них рекомендуется начать использовать Swiper Element, который работает на веб-компонентах:

Swiper Vue components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead.

При первой же следующей необходимости создать слайдер я воспользовался рекомендацией. Далее расскажу, как на Vue реализовать слайдер с применением Swiper Element и покажу готовый пример.

HTML-код

Используются два веб-компонента: <swiper-container> и <swiper-slide>. Разметка имеет следующий вид:

<swiper-container ref="swiper" init="false">
  <swiper-slide>Слайд 1</swiper-slide>
  <swiper-slide>Слайд 2</swiper-slide>
  <swiper-slide>Слайд 3</swiper-slide>
</swiper-container>

Возможны два способа указания параметров слайдера:

1. Атрибутами в теге <swiper-container>.
2. Через объект в скрипте.

Я предпочитаю 2-й вариант, так как не люблю, когда у html-тегов слишком много атрибутов, и мне привычнее задавать параметры через JavaScript.

Но один обязательный атрибут всё же нужно указать – это init="false". Он отключает инициализацию слайдера по умолчанию. В нашем случае это будет делаться скриптом.

Скриптовая часть

Импортируем Swiper Element и регистрируем веб-компоненты:

import { register } from 'swiper/element'
register()

При необходимости импортируем модули, например, навигацию (стрелки “влево/вправо”) и пагинацию:

import { Navigation, Pagination } from 'swiper/modules'

Создаём реактивную переменную, которая привязана к контейнеру свайпера (для этого у тега <swiper-container> уже добавлен параметр ref="swiper" ):

import { ref } from 'vue'

const swiper = ref()

Далее в объекте задаём параметры слайдера (в modules указано то, что импортировали ранее):

const params = {
  modules: [Navigation, Pagination],
  navigation: true,
  pagination: true,
  slidesPerView: 3,
  spaceBetween: 10,
}

Дело осталось за малым. Применяем параметры к контейнеру слайдера и инициализируем его. И этот код запускаем в хуке onMounted:

import { onMounted } from 'vue'

onMounted(() => {
  Object.assign(swiper.value, params)
  swiper.value.initialize()
})

Вот, собственно, и всё.

Демонстрация

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

See the Pen
Swiper Slider with Thumbnails in Vue.js Using Web Components by Dimox (@dimox)
on CodePen.