Доброго вам дня. У минулій статті ми познайомилися з каруселлю Bootstrap і розібрали основні моменти. У цьому пості розглянемо як змінити ефект анімації при зміні слайдів каруселі. Чомусь в офіційній документації Bootstrap немає ніякої інформації з цього приводу, хоча зміна виду анімації реалізується, в принципі, не складно.
Змінювати будемо стандартне перегортання слайдів на ефект розчинення (fade), для цього напишемо додаткові стилі CSS, а в HTML-код практично ніяких правок вносити не будемо.
Ось приклад дефолтной каруселі Bootstrap зі стандартним ефектом анімації зміни слайдів.
Для цього прикладу використовується стандартний HTML-код слайдера з дефолтними CSS стилями Bootstrap.
За замовчуванням каруселі присвоюється додатковий клас slide. який задає ефект зміни слайдів.
Міняємо його на клас fade.
Це все правки, які потрібно вносити в HTML-код. Залишилося тільки написати свої стилі CSS. За замовчуванням класу fade встановлено значення opacity в 0. Міняємо його на 1 і вже ефект зміниться, але анімації як такої не буде, для досягнення нашої мети потрібно додати необхідні стилі касу item і активному слайду.
Остаточний CSS-код буде таким.
Зверніть увагу, що класи «.carousel.fade» і «.item.active» обов'язково потрібно писати разом, не ставлячи прогалин між ними.
В результаті, у нас вийшов слайдер з ефектом розчинення.
Як бачите, змінити стандартний вид анімації каруселі Bootstrap на fade-ефект дійсно не складно, є пара нюансів, звичайно, але від них нікуди не дінешся. На цьому статтю закінчую, сподіваюся, вона вам була корисна і стане в нагоді на практиці.
Додано коментарів - 4Хочу запропонувати невелику доопрацювання CSS /
Суть в тому, що якщо виводити динамічний вміст слайдера з посиланням, то ITEM перекриває ITEM ACTIVE. Додавання z-index виправляє ситуацію.
Можливо, не стикався. Дане рішення використовував кілька разів, завжди працювало без проблем. Але у вашому випадку якщо використовувати стрілки вліво-вправо, то їм теж потрібно буде поставити z-index, причому більше ніж у ITEM.
Буду вельми вдячний, якщо напишете статтю, як позиціонувати caption всередині конкретного слайда, тобто на кожному слайді потрібно мати окрему позицію і розмір caption, як це зробити?
Вітаю! Насправді тут все просто, вам потрібно для кожного .carousel-caption додати унікальний клас. Ну наприклад у вас три слайда, додамо до першого елементу клас test1. до другого test2. ну і до третього test3 відповідно. В результаті виходить ось такий HTML-код:
Тепер можна стилізувати кожен .carousel-caption окремо.
Наприклад ось так: