BS Carousel с эффектом затемнения
09.05.2017 | Написав eugenem
По умолчанию карусель в 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 с эффектом затемнения"
Немає коментарів.