Слайдер

За словом «слайдер» обычно прячут библиотеку на сто килобайт. Почти всё, ради чего её подключают, современный браузер умеет сам: прокрутку с прилипанием к слайду, плавность и работу пальцем. Своего кода в таком слайдере — десяток строк.

Сначала честный вопрос: нужен ли он

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

А вот там, где элементы равнозначны и их много, слайдер на месте: отзывы, фотографии работ, логотипы, карточки товаров. Ни один из них не важнее остальных, и лента экономит высоту страницы.

Разметка: это список, который прокручивается

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

<section class="slider" aria-label="Отзывы">
  <ul class="slider__track" tabindex="0">
    <li class="slider__slide">…</li>
    <li class="slider__slide">…</li>
    <li class="slider__slide">…</li>
  </ul>

  <button class="slider__arrow slider__arrow--prev" type="button"
          aria-label="Предыдущий слайд">…</button>
  <button class="slider__arrow slider__arrow--next" type="button"
          aria-label="Следующий слайд">…</button>
</section>

Атрибут tabindex="0" у ленты стоит не для красоты. Блок с прокруткой обязан быть достижим с клавиатуры: без него человек, который не пользуется мышью, не сможет пролистать слайды стрелками. Это требование проверяют автоматические аудиты доступности, и ругаются они справедливо.

Прокрутка с прилипанием — это три строки CSS

Свойство scroll-snap-type говорит браузеру: останавливай прокрутку не где попало, а на границах слайдов. Дальше он сам добавит инерцию, работу пальцем и плавность.

.slider__track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* прилипать к слайдам по горизонтали */
  scroll-behavior: smooth;          /* плавно, а не рывком */
}

.slider__slide {
  flex: 0 0 85%;                    /* на телефоне виден край соседнего */
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .slider__slide { flex-basis: calc((100% - var(--space-5) * 2) / 3); }
}

Доля 85% на телефоне — приём, а не случайное число. Когда из-за края выглядывает кусок следующего слайда, человеку понятно, что ленту можно листать. Слайд ровно во всю ширину выглядит как обычная картинка, и половина читателей просто не догадается её потянуть.

Что добавляет JavaScript

Всё перечисленное работает без единой строки кода. Скрипт нужен только для трёх вещей.

Что попросить у нейросети

Просить «сделай слайдер» бесполезно: в ответ приедет библиотека. Просить надо конкретное поведение поверх готовой разметки.

Слайды из Evolution CMS

В вёрстке слайды написаны руками. В CMS их заводят как обычные ресурсы в отдельной папке «Слайды» — с картинкой в TV-поле и заголовком. Выводит их DocLister, а разметку одного слайда задаёт чанк.

<ul class="slider__track" tabindex="0">
  [[DocLister?
    &parents=`12`
    &tpl=`sliderSlide`
    &tvList=`slideImage`
    &sortBy=`menuindex`
  ]]
</ul>

Порядок слайдов задаётся полем «Порядок в меню» — то есть перетаскиванием в дереве ресурсов. Это и есть весь смысл переезда на CMS: поменять слайды местами теперь может человек, который никогда не открывал редактор кода.

Частые ошибки