Bootstrap Carousal需要两个分页点，并且两者都具有活动类

Question

i need your help to solve a issue with bootstrap caraousal pagination. actually, i need two pagination dots on a carousal slider. One will be at bottom of top and one will be in right-side. and both have active class like it show current slide image number. For more check image below you will understand batter. here is image that help you to understand

here is code i'm using may it can help you also Fisrt one pagination

 <ol class="carousel-indicators ">
            <li data-target="#myCarousel" data-slide-to="0" class="active">Icon details</li>
            <li data-target="#myCarousel" data-slide-to="1">Icon details</li>
            <li data-target="#myCarousel" data-slide-to="2">Icon details here</li>
            <li data-target="#myCarousel" data-slide-to="3">Icon details here</li>
          </ol>

Second Right Side Pagination code

<div class="carouselrightside">
 <ol class="carousel-indicators">
<li data-target="#myCarousel"  data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>

this one is middle image code

<div class="carousel-inner"><div class="recursos_wrap center item active"> <img class="" src="images/recursos1.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos2.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos3.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos4.png" class="img-responsive" alt=""></div></div>

that's all please help thanks in advance :)

Answer 1

add and remove active class to second carousel indicators using js

 $('.carousel').on('slid.bs.carousel', function() { $(".carouselrightside .carousel-indicators li").removeClass("active"); indicators = $(".carousel-indicators li.active").data("slide-to"); a = $(".carouselrightside .carousel-indicators").find("[data-slide-to='" + indicators + "']").addClass("active"); }) 

  .carousel-inner>.item{ background-color: pink; min-width: 300px; min-height: 300px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h2>Carousel Example</h2> <div id="myCarousel" class="carousel slide myCarousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators "> <li data-target=".myCarousel" data-slide-to="0" class="active">Icon details</li> <li data-target=".myCarousel" data-slide-to="1">Icon details</li> <li data-target=".myCarousel" data-slide-to="2">Icon details here</li> <li data-target=".myCarousel" data-slide-to="3">Icon details here</li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"><div class="recursos_wrap center item active"> <img class="" src="images/recursos1.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos2.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos3.png" class="img-responsive" alt=""></div><div class="recursos_wrap center item "> <img class="" src="images/recursos4.png" class="img-responsive" alt=""></div></div> <!-- Left and right controls --> <div class="carouselrightside"> <ol class="carousel-indicators" style="bottom: 0px;"> <li data-target=".myCarousel" data-slide-to="0" class="active"></li> <li data-target=".myCarousel" data-slide-to="1"></li> <li data-target=".myCarousel" data-slide-to="2"></li> <li data-target=".myCarousel" data-slide-to="3"></li> </ol></div> </div> </div>