Карусель — отличный способ предоставить пользователям информацию. Это похоже на слайд-шоу данных, которые зритель может просмотреть. Это эффективный способ создать интерактивный пользовательский опыт.
В этом посте я поделюсь своим опытом использования каруселей. Я работал над приложением NextJS и использовал компоненты Bootstrap. Добавить простую карусель Bootstrap очень просто. Вы можете напрямую вставить код с Веб-сайта Bootstrap и обновить его данными, которые вы хотите отобразить под carousel-item.
...
<div id="singleCarousel" class="carousel slide carousel-dark" data-bs-ride="carousel" >
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/f87171/333333?text=1" class="img-fluid" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/fdba74/333333?text=2" class="img-fluid" />
</div>
</div>
</div>
...
И результат:
В каруселях Bootstrap доступны различные варианты/функции. Вы можете проверить это здесь".
Но мне нужно было больше настройки. Мне нужно было отображать несколько слайдов одновременно. Итак, моей первой мыслью было добавить несколько элементов в div с классом carousel-item.
<div class="carousel-item active ">
<div class="col">
<div class="card-img">
<img src="https://via.placeholder.com/300x300.png/f87171/333333?text=1" class="img-fluid m-1" />
<img src="https://via.placeholder.com/300x300.png/fdba74/333333?text=2" class="img-fluid m-1" />
<img src="https://via.placeholder.com/300x300.png/bef264/333333?text=3" class="img-fluid m-1" />
<img src="https://via.placeholder.com/300x300.png/f87171/333333?text=4" class="img-fluid m-1" />
</div>
</div>
</div>
...
И вот как это стало:
Но теперь одновременно прокручивались четыре слайда. Я хотел заставить его двигаться по одному слайду за раз. Для этого потребовалось некоторое дополнительное кодирование.
Во-первых, я снова разделил слайды на разные div's с классом carousel-item:
...
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/f87171/333333?text=1" class="img-fluid"/>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="1000">
<div class="col-md-3">
<div class="card">
<div class="card-img">
<img src="https://via.placeholder.com/700x500.png/fdba74/333333?text=2" class="img-fluid"/>
</div>
</div>
</div>
</div>
...
Затем добавил код для добавления необходимого количества слайдов, которые я хотел отображать одновременно:
let items = document.querySelectorAll('.carousel .carousel-item') //Selects carousel items
items.forEach((el) => {
const minPerSlide = 4 // Number of slides per carousel item
let next = el.nextElementSibling //selecting the next slide in carousel
for (var i=1; i<minPerSlide; i++) {
if (!next) { //checks if there is a next slide in carousel, else appends the first slide
next = items[0]
}
let cloneChild = next.cloneNode(true) //clones the next node
el.appendChild(cloneChild.children[0]) //appends the first slide in node to the current slide
next = next.nextElementSibling //selects the next slide
}
}
Этот код необходимо выполнить сразу после рендеринга компонента. Итак, мы используем хук useEffect компонента.
После этого последний шаг — обновить код CSS, чтобы переходить слайды по одному:
/* To display slides in a row */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* For transition */
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
И получаем окончательный результат:
Вот и все! В другой теме, в следующий раз :)
