引导轮播更多幻灯片链接到一个指标
Posted
技术标签:
【中文标题】引导轮播更多幻灯片链接到一个指标【英文标题】：Bootstrap carousel more slides linked to one indicator 【发布时间】：2016-09-24 08:17:12 【问题描述】：我正在使用 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】：带有 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/
@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" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" ></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" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=1" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=2" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=3" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=4" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=5" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=6" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=7" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=8" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/9c6/fff/?text=9" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/c69/fff/?text=10" ></div>
<div class="item"><img class="img-responsive" src="//placehold.it/1200x300/69c/fff/?text=11" ></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>【讨论】：
谢谢你，聪明的解决方案！但是，如果我有自定义指示器，其中包含文本并且它们会相互重叠，那么文本会更粗一些，并且还有边框。见这里-jsfiddle.net/wwjhfv4c。有没有办法通过一些绝对定位来解决它？ @jstorm31 我已经通过 jQuery 解决了这个任务。我已经更新了我的答案。 @jstorm31 这是The HTML+CSS solution for custom indicators 的链接。怕是太难用了。 @jstorm31 Bootstrap 的轮播类公开了 two events 。slide.bs.carousel 在调用幻灯片实例方法时立即触发。 slid.bs.carousel 在轮播完成幻灯片转换时触发。因此，请检查脚本中的 e 字母。
@jstorm31 我注意到你的 jsfiddle 中有 3 个问题。 1）在javascript末尾添加);。 2) 将指示器移出转盘。否则，轮播将在每次更换幻灯片时切换指示灯。 3) 将幻灯片编号移动一位。 Carousel 使用数字，从零开始。 12 张幻灯片获得从 0 到 11 的数字。指标也使用从 0 到 11 的数字。但是幻灯片显示的图像的数字从 1 到 12。jsfiddle.net/glebkema/76kczyan以上是关于引导轮播更多幻灯片链接到一个指标的主要内容，如果未能解决你的问题，请参考以下文章