javascript - Bootstrap 轮播链接到一个指示器的更多幻灯片

标签 javascript jquery html twitter-bootstrap carousel

我正在使用 Bootstrap 轮播控件，我需要使用比幻灯片更少的指示器。因此，例如对于幻灯片 1 - 3，第一个指示器将处于事件状态。当我点击另一个指标时，它会跳到幻灯片 4。

我试图通过在 HTML 中包含所有指示器来解决它，但使用 display: none 隐藏其中一些。然后用JS找到active slide，去掉.active类，添加到右边的indicator。

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。

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

最佳答案

带有 4 个指示器而不是 12 个的轮播

1。标准指标。 CSS 技巧

Bootstrap 的指标是透明的，除了活跃的指标。因此，我将它们放在一起，并收到两堆，每堆三个指标。

第二个和第三个指标位于第一个指标的下方。因此，只有第一个指标对点击使用react。

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

@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;
}
<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>

2。自定义指标。 jQuery

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

$( 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');
    }
  });
});
@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%;
}
<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>

关于javascript - Bootstrap 轮播链接到一个指示器的更多幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37458946/

上一篇：html - html/css 中是否有裁剪图像的功能？

下一篇：html - 隐藏类 Bootstrap 不起作用？

相关文章：

javascript - 使用 webpack 导入 print.js

javascript - obj.hasOwnProperty() 和 Object.prototype.hasOwnProperty.call() 有什么区别？

php - 如何从jquery表中插入多个表单数据到数据库

javascript - 读取 <td> 然后在单击时加载弹出窗口

javascript - 在 angular js div 中使用应用程序名称不起作用

javascript - fullpage.js - 大于视口(viewport)的部分的正常滚动

javascript - jQuery 动画缩放需要我单击正文？

html - 在下拉列表中带有 anchor 滚动的 hrefs

javascript - HTML 中的下划线模板生成神秘的 404 错误

javascript - Uploadify onUploadSuccess 未返回我的数据

©2024 IT工具网  联系我们