Bootstrap 5 Карусельный кроссфейд

Bootstrap 5 Carousel Crossfade используется для создания эффекта карусельного анимированного слайд-шоу в стиле Crossfade. Для этого используется класс .carousel-fade.

Используемый класс Carousel Crossfade:

• .carousel-fade: этот класс используется для добавления эффекта затухания в анимацию слайдов карусели.

Синтаксис:

<div id="GFG" class="carousel slide carousel-fade" 
    data-bs-ride="carousel" >
    <div class="carousel-inner">
        <div class="carousel-item ">
               ...
        </div>
      </div>
</div>

Пример 1. В этом примере мы создадим карусельную анимацию слайдов с эффектом затухания.

Выход:

Пример 2: В этом примере мы создадим индивидуальные индикаторы с плавным переходом.

Выход:

Ссылки: https://getbootstrap.com/docs/5.0/components/carousel/#crossfade