Menu
I have a dynamic amount of carousels loaded at once in a view, but I can only scroll through the first carousel rendered. How can I control all of the ones loaded? Only one carousel is able to be viewed at once, the others are hidden.
$('#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));
});
Html:
<div class="draft posts" id="draft_1"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
<div class='view-draft-body'>
<h2>I'm editing htis draft</h2>
<p contenteditable="true"> </p>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>This is Tsteting new draft</h1>
</div>
<div class='view-draft-body'>
<h2>Click to W<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;">$('#post-body textarea').val(content) </span><span style="line-height: 1.1;"> editing</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
</a>
</div>
</div>
</div>
<div class="draft posts" id="draft_2"><div class='container'>
<div class='col-md-12'>
<div class='carousel slide' id='myCarousel'>
<div class='carousel-inner'>
<div class='item active'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Revised
</div>
<div class='view-draft-title'>
<h2>Draft 2 After edit</h2>
</div>
<div class='view-draft-body'>
<h2>Draft 2 After edit</h2>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
<div id='border'>
<a href='#'></a>
<div class='text-center'>
Original
</div>
<div class='view-draft-title'>
<h1>Number 2</h1>
</div>
<div class='view-draft-body'>
<h2>Draft 2 before edit</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-left'></i>
</a>
<a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'>
<i class='glyphicon glyphicon-chevron-right'></i>
583
To insert multiple jQuery carousels to the same webpage, you need to create each carousel with a unique ID. In Amazing Carousel, Publish dialog, select the option Publish to Folder, then click Browse to select a folder to save the generated files. You need to set up a unique Carousel ID for each carousel.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
How do I stop bootstrap carousel Auto Slide? Use the [interval]="'0'" input. This will disable the auto-sliding feature.
You have two carousels with id #myCarousel.
One of these should be changed to a different id (#carousel2, for instance). Then the associated controls should be updated to have href="#carousel2"
In general, you should only ever use an ID once per page.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
