Меняем эффект анимации карусели Bootstrap

Доброго времени суток. В прошлой статье мы познакомились с каруселью Bootstrap и разобрали основные моменты. В этом посте рассмотрим как изменить эффект анимации при смене слайдов карусели. Почему-то в официальной документации Bootstrap нет никакой информации по этому поводу, хотя изменение вида анимации реализуется, в принципе, не сложно.

Изменять будем стандартное перелистывание слайдов на эффект растворения (fade), для этого напишем дополнительные стили CSS, а в HTML-код практически никаких правок вносить не будем.

Вот пример дефолтной карусели Bootstrap со стандартным эффектом анимации смены слайдов.

Для этого примера используется стандартный HTML-код слайдера с дефолтными CSS стилями Bootstrap.

<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», который задает эффект смены слайдов.

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

Добавлено коментариев  -    4

  1. Антон

    Хочу предложить небольшую доработку CSS/
    Суть в том, что если выводить динамическое содержимое слайдера со ссылкой, то ITEM перекрывает ITEM ACTIVE. Добавление z-index исправляет ситуацию.

    .carousel.fade{
    	opacity: 1;
    }
    .carousel.fade .item{
    	display: block;
    	position: absolute;	
    	left: 0;
    	top: 0;
    	width: 100%;
    	opacity: 0;
    	transition: opacity 1.2s;
    	z-index: 0;
    }
    .carousel.fade .item.active{
    	position: relative;
    	opacity: 1;
    	z-index: 1;
    }
    1. Евгений

      Возможно, не сталкивался. Данное решение использовал несколько раз, всегда работало без проблем. Но в вашем случае если использовать стрелки влево-вправо, то им тоже нужно будет задать z-index, причем больше чем у ITEM.

      .carousel-control{
        z-index: 2;
      }
  2. Эдуард

    Здравствуйте!

    Буду весьма благодарен, если напишите статью, как позиционировать caption внутри конкретного слайда, т.е. на каждом слайде нужно иметь отдельную позицию и размер caption, как это сделать?

    1. Евгений

      Здравствуйте! На самом деле здесь все просто, вам нужно для каждого .carousel-caption добавить уникальный класс. Ну например у вас три слайда, добавим к первому элементу класс test1, ко второму test2, ну и к третьему test3 соответственно. В результате получается вот такой HTML-код:

      <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="1.jpg" alt="...">
            <div class="carousel-caption test1">Дополнительная информация слайда 1</div>
          </div>
          <div class="item">
            <img src="1.jpg" alt="...">
            <div class="carousel-caption test2">Дополнительная информация слайда 2</div>
          </div>
          <div class="item">
            <img src="1.jpg" alt="...">
            <div class="carousel-caption test3">Дополнительная информация слайда 3</div>
          </div>
      </div>

      Теперь можно стилизовать каждый .carousel-caption в отдельности.
      Например вот так:

      .carousel-caption.test1{
        position: absolute;
        top: 10px;
        left: 10px;
        right: auto;
      }
      .carousel-caption.test2{
        position: absolute;
        bottom: 50px;
        left: auto;
        right: 20px;
      }
      .carousel-caption.test3{
        position: absolute;
        top: 10px;
      }

Добавить комментарий