I want to show ONLY the next image and hide the previous image. Basically, I want the main image to cover 80% of the screen and the next image to cover 20% of the screen.
This code I have currently covers roughly 25% for the previous image, 50% for the current image, 25% for the next image. How do I go about this?
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-001.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-002.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-003.jpg" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
JS:
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
CSS:
<style>
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
</style>
.carousel-inner {
width: 300%;
left: -25%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.