I am using two sliders, the issue is on the second one. It should show multiple images at once then slide one item at a time. But in this situation, it only shows on item. I tried to follow all the steps on this thread but it still doesn't work: Bootstrap: Slide only one image among the multiple images in an item of the carousel
$('#myCarousel').carousel({
interval: 4000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});.carousel-inner .active.left {
left: -25%;
}
.carousel-inner .active.right {
left: 25%;
}
.carousel-inner .next {
left: 25%;
}
.carousel-inner .prev {
left: -25%;
}
.carousel-control {
width: 4%;
}
.carousel-control.left,
.carousel-control.right {
margin-left: 15px;
background-image: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-sm-12 margin-top-20">
<div id="largeCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#largeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#largeCarousel" data-slide-to="1"></li>
<li data-target="#largeCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner custom_carousel_holder">
<div class="item active">
<img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" />
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#largeCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#largeCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-sm-12 text-center margin-top-20">
<h3>Discover Our Brands</h3>
</div>
<div class="col-md-12 text-center">
<h3>Bootstrap 3 Multiple Slide Carousel</h3>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-3">
<a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" 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>I already checked out the samples on the provided link above and copy pasted the heck out of it and it still doesn't work. I'm not really sure if i'm causing a conflict on both sliders.
tag though. oddly enough when i moved it inside the
tag it worked but not as I expect it to be. it slides 4 images at the same time. i need to have it show 4 to 8 images while sliding in a single image in, and another out and i'm not really sure how to do it. i have a hunch that i need to do something with the javascript but i'm not well versed.
– Claude Aug 31 '17 at 10:01