Статьи

Слайдер Bootstrap: как поменять вид анимации карусели?

Опубликовано: 01.09.2018

видео Слайдер Bootstrap: как поменять вид анимации карусели?

Уроки по CSS/CSS3. Часть 10. Фон и множественные фоны

Доброго времени суток. В прошлой статье мы познакомились с каруселью 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-эффект действительно не сложно, есть пара нюансов, конечно, но от них никуда не денешься. На этом статью заканчиваю, надеюсь, она вам была полезна и пригодится на практике.

2011.11.19
Карта
rss