Bootstrap Carousel’e fade geçiş efekti nasıl verilir

Bootstrap Carousel’e fade geçiş efekti nasıl verilir
63

Bu yazımda bootstrap’ın içinde bulunan Carousel’e fade geçiş efektinin nasıl verileceğinden bahsedeceğim. Lafı uzatmadan nasıl yapacağımızdan bahsedeyim.

Herhangi bir javascript kodu kullanmanıza gerek yok ekleyeceğiniz tek şey mevcut bootstrap carousel kodlarına ek bir div class’ı dır.

Bootstrap’ın varsayılan carousel koduna göz atmak için tıklayın.

Bootstrap Carousel’e fade geçiş efektini eklemek istiyorsanız aşağıdaki kodları kullanın.

HTML

<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel"><!-- Indicators --></div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">

<img src="..." alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">

<img src="..." alt="..." />
<div class="carousel-caption">...</div>
</div>
...

</div>
<!-- Controls -->

<span class="sr-only">Previous</span>
<span class="sr-only">Next</span>

CSS

/* fade on slider */
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1 !important;
}
.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;
}

Yorum Yap