Динамика AlpineJS - Готовые решения на AlpineJS - Простой слайдер

Исходный код доступен по ссылке

Пояснения:

Установка начальных параметров, переменные activeSlide и slideCount

x-data="{ activeSlide: 1, slideCount: 3 }"

Каждые несколько секунд изображение должно меняться. Если просмотр находится на последнем слайде, необходим возврат к первому. Чтобы запустить слайдшоу в автоматическом режиме надо добавить x-init. Вы можете удалить эту строку, если не хотите, чтобы слайд-шоу воспроизводилось автоматически:

x-init="setInterval(() => { activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1 }, 5000)"

Это перемещает слайды влево, когда мы переключаемся между ними. Данный код гарантирует, что каждый слайд будет располагаться точно на экране:

:style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'"

Это позволяет вернуться на один слайд назад при нажатии. Если вы находитесь на первом слайде и нажмете, вы перейдете на последний слайд.

@click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount"

С помощью атрибута x-for выведем все изображения:

x-for="slideIndex in slideCount" :key="slideIndex"

Это меняет цвет кнопок в зависимости от просматриваемого слайда. Кнопка слайда, на котором вы находитесь, станет оранжевой, а остальные — белыми:

:class="{'bg-orange-500': activeSlide === slideIndex, 'bg-white/50': activeSlide !== slideIndex}"