CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
J Ha
J Ha

Reputation: 1272

Bootstrap caroucel could not active 2 carousel-indicators

I have created a slider by bootstap caroucel i add 2 "carousel-indicators" to my slider, one for top and one for bottom, it work well, but the carousel indicators at the bottom could not active when I'm clicking on it here is my code for 2 carousel-indicators:

<ol id="carou-top" class="carousel-indicators carousel-indicators-top">
    
   
                <li class="" data-slide-to="0" data-target="#myCarousel"></li>
                <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
           
  </ol>

<ol id="carou-bottom" class="carousel-indicators carousel-indicators-bottom">
    
   
                <li class="" data-slide-to="0" data-target="#myCarousel"></li>
                <li class="" data-slide-to="1" data-target="#myCarousel"></li>
           
  </ol>

how can i add class "active" to the bottom image for demo many thanks

Upvotes: 0

Views: 351

Answers (1)

max
max

Reputation: 8687

You can achieve this with that code:

HTML:

<div class="container">

  <div class="row">

    <div class="col-md-6">

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
          </div>
          <div class="item">
            <img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
          </div>
          <div class="item">
            <img src="http://www.gettyimages.fr/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="...">
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </div>

  </div>

</div>

<ol class="carousel-indicators carousel-indicators-custom">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

JS:

$('#carousel-example-generic').on('slide.bs.carousel', function() {

  var resetTimeout;
  clearTimeout(resetTimeout);

  var i = 0;
  var activeSlideNumber = 0;
  var carouselIndicatorsDefault = $(this).find('.carousel-indicators > li');
  var carouselIndicatorsCustom = $('.carousel-indicators-custom > li');

  resetTimeout = setTimeout(function () {

    for (i = 0; i < carouselIndicatorsDefault.length; i++) {

      if (carouselIndicatorsDefault.eq(i).hasClass('active')) {
        activeSlideNumber = i;
      }

    }

    carouselIndicatorsCustom.removeClass('active');
    carouselIndicatorsCustom.eq(activeSlideNumber).addClass('active');

   }, 20);

});

For loop in JS checks if your default carousel indicator has class of active (when the slide changes) and store number of this slide to the activeSlideNumber variable. Then it removes all active classes from your custom indicators and add only to the active one.

CODEPEN

Upvotes: 1

Related Questions