Первые впечатления от использования Swiper Element на проекте

При необходимости реализовать на сайте какой-либо слайдер (для всяких вжух-вжух влево-вправо) обычно я использую библиотеку Swiper, которая достаточно популярна, имеет гибкое и хорошо документированное API, а также широкую поддержку среди разработчиков.

До поры до времени меня в этой библиотеке практически все устраивало, за исключением необходимой верстки, которая требуется для её работы, как это приведено на базовом примере:

<!-- Основной контейнер слайдера -->
<div class="swiper">
  <!-- Враппер -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
    ...
  </div>
  <!-- Пагинация -->
  <div class="swiper-pagination"></div>

  <!-- Навигация -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Скроллбар -->
  <div class="swiper-scrollbar"></div>
</div>

Этот базовый пример вроде бы вполне логичен и понятен. Но на практике, такой код сильно разрастается из-за кучи вложенных элементов в слайдах, что приводит к снижению читаемости кода. Лично мне такие портянки кода совсем не нравятся, с учетом того, что уже много лет в браузерах присутствует поддержка нативных веб-компонентов, которые позволяют скрыть весь этот кодовый мусор в отдельный маленький элемент и тем самым упростить читаемость кода.

Конечно вы можете возразить про то, что это все излишне из-за повсеместного распространения React/Vue/Angular с их компонентным подходом и я сам так иногда делаю. Я сам очень люблю эти фреймфорки и библиотеки (особенно связку Vite + Vue), но при этом я прекрасно понимаю, что они не всегда оптимальны для определенного спектра задач. Одно дело, создавать самодостаточное веб-приложение или лендинг, а другое, это верстать шаблон несложного многостраничного сайта, который по итогу будет натягиваться на стороннюю CMS со своим шаблонизатором (например Twig). В таком случае лучше обратить внимание на другие инструменты разработки, такие как EJS и пр. с которыми, использование нативных веб-компонентов может неплохо облегчить разработку.

Swiper Element в качестве Swiper на стероидах веб-компонентах

К моей радости, недавно (в 2023 году) разработчики Swiper реализовали поддержку нативный веб-компонентов и выпустили в виде отдельной библиотеки под названием Swiper Element. Т.е. вместо всей этой ужасной структуры HTML-элементов с кучей классов, мы наконец-то получили простые элементы <swiper-container>, <swiper-slide>. В комплексе это выглядит как-то так:

<swiper-container navigation="true" pagination="true" scrollbar="true">
  <swiper-slide>Слайд 1</swiper-slide>
  <swiper-slide>Слайд 2</swiper-slide>
  <swiper-slide>Слайд 3</swiper-slide>
  ...
</swiper-container>

Разметка стала намного логичней и теперь наконец-то в слайдере понятно, что каждый слайд это именно "слайд", а не просто какой-то абстрактный набор div-ов. Все параметры слайдера задаются просто через атрибуты тегов, да и вообще, управлять слайдером и прослушивать события можно с использованием стандартных методов DOM API, например:

const swiperEl = document.querySelector('swiper-container');

swiperEl.addEventListener('swiper-progress', (event) => {
  const [swiper, progress] = event.detail;
});

swiperEl.addEventListener('swiper-slidechange', (event) => {
  console.log('slide changed');
});

Естественно я не мог упустить возможность попробовать Swiper Element на деле, тем более как-раз во всю делался очередной проект и сроки там немного позволяли слегка поэспериментировать.

Первые попытки и проблемы внедрения Swiper Element

Поначалу, на этапе верстки шаблона сайта, Swiper Element мне очень даже понравился. Крайне простое решение, без кучи дополнительных скриптов и зависимостей, прям чудеса. Верстка становилась куда более читаемой и простой для последующего натягивания на CMS, что не могло не радовать. Такими темпами я прям совсем уж расслабился, ибо все на первый взгляд все работало более-менее стабильно, как и раньше в случае с обычным Swiper.

Но уже по прошествии определенного времени, особенно на этапе тестирования разрабатываемого проекта, стало понятно, что мое мнение касательно стабильности Swiper Element (11-ой версии !), оказалось слишком уж преждевременным:

• Например, при попытке реализации циклично переключаемого слайдера с эффектом "fade", если во время анимации меняется размер страницы (ресайз страницы браузера или тот же поворот экрана на мобильном устройтве...), то вся анимация ломалась намертво.
• Потом вскрылись проблемы при большом разрешении экрана, ограниченном размере слайдера и использовании в слайдах CSS свойства aspect-ratio. Это кстати была очень неприятная проблема для меня, поскольку в проектах я стал часто использовать это свойство, как наиболее очевидный способ принудительно задать соотношение сторон элемента.
• При использовании встроенных элементов навигации, события перелистывания слайдера срабатывали дважды, а те решения, которые предлагали там в комментариях в issue вызывали дергание анимации перехода, поэтому пришлось писать свои элементы навигации с привязкой к JavaScript событиям методов Swiper Element API позволяющих вызвать перелистывание слайдера.
• И это еще не считая общих для Swiper и Swiper Element мелких багов.

Поначалу, я решал проблемы костылями в коде, но в итоге посмотря на то количество проблем со Swiper Element с которыми я столкнулся при разработке сайта (а сколько их реально могло вылезти потом уже у клиента?!), стало понятно, что эта библиотека пока еще сырая для использования на продакшене. В результате, чтобы дальше не рисковать, пришлось переписать код всех слайдеров с Swiper Element обратно на обычный Swiper, который куда более стабилен.

Заключение

На момент написания статьи использовался Swiper Element 11-ой версии и пока что я могу про нее сказать только то, что если и использовать данную версию библиотеке на продакшене, то только с большой осторожностью и с серьезными покрытиями E2E-тестами. Ну а пока что на продакшене лучше все-таки использовать обычный Swiper.

Тем не менее, Swiper Element продолжает активно развиваться и надеюсь в ближайшем будущем разработчики сделают её куда более надежной, ибо реализация слайдера на нативных веб-компонентах довольно удобная вещь, чтобы добавить эту библиотеку в копилку используемых инструментов веб-разработчика.