Question

我需要你的帮助来解决引导性caraousal分页的问题。实际上，我需要在一个carousal滑块上有两个分页点。一个将位于顶部，一个位于右侧。并且两者都有活动类，就像显示当前幻灯片图像编号一样。有关下面的更多检查图片，您将了解击球手。 here is image that help you to understand

这里是我正在使用的代码，也可以帮助你 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>

第二个右侧分页代码

<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>

这是中间图像代码

<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>

这一切都请提前帮助谢谢：）

Answer 1

使用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>

Bootstrap Carousal需要两个带有活动类的分页点

1 个答案: