Новости
Статьи
Слайдер Bootstrap: как поменять вид анимации карусели?
Опубликовано: 01.09.2018
Доброго времени суток. В прошлой статье мы познакомились с каруселью Bootstrap и разобрали основные моменты. В этом посте рассмотрим как изменить эффект анимации при смене слайдов карусели. Почему-то в официальной документации Bootstrap нет никакой информации по этому поводу, хотя изменение вида анимации реализуется, в принципе, не сложно.
Изменять будем стандартное перелистывание слайдов на эффект растворения (fade), для этого напишем дополнительные стили CSS, а в HTML-код практически никаких правок вносить не будем.
Вот пример дефолтной карусели Bootstrap со стандартным эффектом анимации смены слайдов.
Для этого примера используется стандартный HTML-код слайдера с дефолтными CSS стилями Bootstrap.
Design Carousel Slider With Transition Effects Using Sketch+Flinto
<div id="testCarousel" class="carousel slide" data-ride="carousel"> <!-- Индикаторы карусели --> <ol class="carousel-indicators"> <li data-target="#testCarousel" data-slide-to="0" ></li> <li data-target="#testCarousel" data-slide-to="1" class="active"></li> <li data-target="#testCarousel" data-slide-to="2"></li> </ol> <!-- Слайды карусели --> <div class="carousel-inner"> <!-- Слайд 1 --> <div class="item "> <img src="img/carousel-bootstrap-slide1.jpg" alt="..."> </div> <!-- Слайд 2 --> <div class="item active"> <img src="img/carousel-bootstrap-slide2.jpg" alt="..."> </div> <!-- Слайд 3 --> <div class="item"> <img src="img/carousel-bootstrap-slide3.jpg" alt="..."> </div> </div> <!-- Навигация карусели (следующий или предыдущий слайд) --> <a class="left carousel-control" href="#testCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#testCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
По умолчанию карусели присваивается дополнительный класс slide, который задает эффект смены слайдов.
7. Bootstrap изображения
<div id="testCarousel" class="carousel slide" data-ride="carousel">
Меняем его на класс fade.
<div id="testCarousel" class="carousel fade" data-ride="carousel">Это все правки, которые нужно вносить в HTML-код. Осталось только написать свои стили CSS. По умолчанию классу fade установлено значение opacity в 0. Меняем его на 1 и уже эффект изменится, но анимации как таковой не будет, для достижения нашей цели нужно добавить необходимые стили кассу item и активному слайду.
Окончательный CSS-код будет таким.
.carousel.fade{ opacity: 1; } .carousel.fade .item{ display: block; position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: opacity .5s; } .carousel.fade .item.active{ position: relative; opacity: 1; }Обратите внимание, что классы «.carousel.fade» и «.item.active» обязательно нужно писать слитно, не ставя пробелов между ними.
В результате, у нас получился слайдер с эффектом растворения.
Как видите, изменить стандартный вид анимации карусели Bootstrap на fade-эффект действительно не сложно, есть пара нюансов, конечно, но от них никуда не денешься. На этом статью заканчиваю, надеюсь, она вам была полезна и пригодится на практике.
