"Zoom Carousel "
Bootstrap 3.3.0 Snippet by raznow

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="carousel zoom landscape slide" id="carousel-landscape" data-ride="carousel" data-interval=0>
<ol class="carousel-indicators">
<li data-target="#carousel-landscape" data-slide-to="0" class="active"></li>
<li data-target="#carousel-landscape" data-slide-to="1" class=""></li>
<li data-target="#carousel-landscape" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
<div class="item">
<img alt="" src="https://dummyimage.com/340x225/666666/ffffff">
</div>
</div>
<a href="#carousel-landscape" class="left carousel-control" role="button" data-slide="prev"><span class="sr-only">Previous</span> </a>
<a href="#carousel-landscape" class="right carousel-control" role="button" data-slide="next"><span class="sr-only">Next</span> </a>
</div>
</div>
<div>
<div class="carousel zoom portrait slide" id="carousel-portrait" data-ride="carousel" data-interval=0>
<ol class="carousel-indicators">
<li data-target="#carousel-portrait" data-slide-to="0" class="active"></li>
<li data-target="#carousel-portrait" data-slide-to="1" class=""></li>
<li data-target="#carousel-portrait" data-slide-to="2" class=""></li>
</ol>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* carousel.zoom */
.carousel.zoom{
overflow: hidden;
display: inline-block;
}
.carousel.zoom .carousel-inner{
position: relative;
overflow: visible;
}
.carousel.zoom .carousel-inner>.item{
position: absolute;
display: block;
width: 100%;
opacity: 0;
z-index: 0;
transition: all .4s ease-in-out;
}
.carousel.zoom .carousel-inner>.item.active{
position: relative;
opacity: 1;
z-index: 1;
}
.carousel.zoom .carousel-inner>.item.active.right,
.carousel.zoom .carousel-inner>.item.next {
-webkit-transform-origin: center right;
-moz-transform-origin: center right;
-ms-transform-origin: center right;
-o-transform-origin: center right;
transform-origin: center right;
opacity: 0.3;
}
.carousel.zoom .carousel-inner>.item.active.left,
.carousel.zoom .carousel-inner>.item.prev {
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
-o-transform-origin: center left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(".carousel.zoom").carousel().on("slide.bs.carousel", function (data) {
var n = $(data.target).find(".item").length;
var active = data.relatedTarget;
if(active===undefined){
active = $(data.target).find(".item.active");
}else{
active = $(data.relatedTarget);
}
console.log(active);
$(data.target).find(".item.next").removeClass("next");
var next = $(data.target).find(".item").eq(active.index()-n+1);
next.addClass("next");
$(data.target).find(".item.prev").removeClass("prev");
var prev = $(data.target).find(".item").eq(active.index()-1);
prev.addClass("prev");
}).trigger("slide.bs.carousel");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: