BS Carousel с эффектом затемнения

09.05.2017 | Написал

По умолчанию карусель в Bootstrap перелистывается. И это никак не меняется. Но смену кадров можно сделать и с другим популярным эффектом — затемнения или fade. Делается это следующим образом.

1. Добавляем в таблицу стилей стили:

/* fade эффект банера */
.carousel-fade .carousel-inner .item {opacity: 0;transition-property: opacity;}
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {left: 0;opacity: 0;z-index: 1;}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {opacity: 1;}
.carousel-fade .carousel-control {z-index: 2;}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right {opacity: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left {opacity: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}

2. Самой карусели добавляем стиль carousel-fade. Примерно так:

<div id="carousel-Banners" class="carousel slide carousel-fade" data-ride="carousel">
......
</div>

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

Комментарии читателей статьи "BS Carousel с эффектом затемнения"

Нет комментариев.

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

Ваш e-mail не будет опубликован.