CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Jay
Jay

Reputation: 938

Multiple bootstrap carousels on one page, can only control one

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)&nbsp;</span><span style="line-height: 1.1;">&nbsp;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>

Upvotes: 9

Views: 37368

Answers (2)

Manish Choudhary
Manish Choudhary

Reputation: 101

$$('#carousel-1').carousel({ interval: 4000, wrap: true, keyboard: true });

/* 2 carousel */ $('#carousel-2').carousel({ interval: 6000, wrap: true, keyboard: true });

Upvotes: 0

Cassie
Cassie

Reputation: 474

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.

Upvotes: 16

Related Questions