Bootstrap轮播更多幻灯片链接到一个指标

时间：2016-05-26 11:00:08

标签： javascript jquery html twitter-bootstrap carousel

我正在使用Bootstrap轮播控件，我需要使用少于幻灯片的指标。因此，例如对于幻灯片1-3，第一指示符将是活动的。当我点击另一个指标时，它将跳到幻灯片4.

我试图通过在HTML中包含所有指标来解决这个问题，但是将其中一些隐藏在display: none中。然后使用JS查找活动幻灯片，删除.active类并将其添加到正确的指示符。

HTML 

<!-- Indicators -->
<ul class="carousel-indicators">
   <!-- For these three only #a indicator should be active -->
   <li id="a" data-target="#carousel" data-slide-to="0" class="active"></li>
   <li id="a1" class="hidden" data-target="#carousel" data-slide-to="1"></li>
   <li id="a2" class="hidden" data-target="#carousel" data-slide-to="2"></li>

   <!-- another group -->
   <li id="b" data-target="#carousel" data-slide-to="3"></li>
</ul>

的JavaScript 

$('#carousel').on('slid.bs.carousel', function (e) {
    if ($("#a1").hasClass("active")) {
        $("#a1").removeClass("active");
        $("#a").addClass("active");
    } else if ($("#a2").hasClass("active")) {
        $("#a2").removeClass("active");
        $("#a").addClass("active");
    }
});

以下是一个示例 - https://jsfiddle.net/9x5u7kjx/2/

我认为这根本不是优雅的解决方案，所以还有更好的方法吗？

修改 我会尝试更清楚地解释它。

例如有12张幻灯片，它们会逐一自动滑动。它们可以通过箭头（左和右）控制。 但只有4个指标（旋转木马下面的那些圆圈）。对于幻灯片1 - 3，第一个指示器应该是活动的，第二个指示器应该是4 - 6，依此类推。

所以我可以使用箭头逐个滑动，但当我点击第二个指示时，轮播将跳过滑动4。

看看这个例子，它可以正常工作，但我认为这可以更好地解决。

1 个答案:

答案 0 :(得分：1)

带有4个指示符而不是12个

的轮播

1。标准指标。 CSS技巧

除了活动指标外，

Bootstrap指标是透明的。所以我把它们放在一起，每个都收到两叠三个指标。

第二和第三个指标低于第一个指标。因此，只有第一个指标对点击作出反应。

.carousel-indicators > li:nth-of-type(3n+2),
.carousel-indicators > li:nth-of-type(3n+3) {
  margin-left: -15px;
  position: relative;
  z-index: -1;
}

Bootstrap的活动指示器比非活动指示器宽2个像素。它需要比其他像素移动1个像素。

.carousel-indicators > li.active:nth-of-type(3n+2),
.carousel-indicators > li.active:nth-of-type(3n+3) {
  margin-left: -16px;
}

检查结果：

https://jsfiddle.net/glebkema/346n1cwo/

＆＃13;
＆＃13; 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img {
  width: 100%;
}
.carousel-indicators > li:nth-of-type(3n+2),
.carousel-indicators > li:nth-of-type(3n+3) {
  margin-left: -15px;
  position: relative;
  z-index: -1;
}
.carousel-indicators > li.active:nth-of-type(3n+2),
.carousel-indicators > li.active:nth-of-type(3n+3) {
  margin-left: -16px;
}
＆＃13; 
<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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    <li data-target="#carousel-example-generic" data-slide-to="5"></li>
    <li data-target="#carousel-example-generic" data-slide-to="6"></li>
    <li data-target="#carousel-example-generic" data-slide-to="7"></li>
    <li data-target="#carousel-example-generic" data-slide-to="8"></li>
    <li data-target="#carousel-example-generic" data-slide-to="9"></li>
    <li data-target="#carousel-example-generic" data-slide-to="10"></li>
    <li data-target="#carousel-example-generic" data-slide-to="11"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=0" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" 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 class="alert text-center">
  Bootstrap carousel with 4 standard indicators instead of 12 by CSS trick
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

2。自定义指标。 jQuery的

https://jsfiddle.net/glebkema/0L97fuzw/

＆＃13;
＆＃13; 
$( document ).ready(function() {
  var CLASS_CAROUSEL    = '#carousel-example-generic';
  var CLASS_INDICATORS  = '#carousel-indicators';
  var CLASS_ACTIVE      = CLASS_INDICATORS + '>li.active';
  var selectCarousel    = $(CLASS_CAROUSEL); 

  selectCarousel.on('slide.bs.carousel', function (e) {
    var indexTarget = $(e.relatedTarget).index();
    indexTarget = indexTarget - indexTarget % 3;
    
    var selectTarget = $(CLASS_INDICATORS + '>li[data-slide-to="' + indexTarget + '"]');
    if ( !selectTarget.hasClass('active') ) {
      $(CLASS_ACTIVE).removeClass('active');
      selectTarget.addClass('active');
    }
  });
});
＆＃13; 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.carousel-inner > .item > img {
  width: 100%;
}

/* design */
.carousel-indicators > li,
.carousel-indicators > li.active{
  border-radius: 0;
  border-width: 1px;
  height: 30px;
  line-height: 28px; /* = height - 2 * border-width */
  margin: 0 1px; 
  text-indent: 0;
  width: 70px;
}
.carousel-indicators > li {
  border-color: #666;
  color: #666;
}
.carousel-indicators > li:hover {
  background-color: #fee;
}
.carousel-indicators > li.active {
  border-color: red;
  color: red;
}

/* location */
.carousel-indicators {
  margin: 6px 0;
  position: static;
  width: 100%;
}
＆＃13; 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=0" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" alt=""></div>
    <div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" 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>

<!-- Indicators -->
<ol id="carousel-indicators" class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active">0 - 2</li>
  <li data-target="#carousel-example-generic" data-slide-to="3">3 - 5</li>
  <li data-target="#carousel-example-generic" data-slide-to="6">6 - 8</li>
  <li data-target="#carousel-example-generic" data-slide-to="9">9 - 11</li>
</ol>

<div class="alert text-center">
  Bootsrap carousel with 4 custom indicators instead of 12 by jQuery
</div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题