jquery - 带有上一个和下一个的引导轮播分页
问题描述
我正在尝试在 carousel-indicators 列表中添加 carousel Left 和 Right 控件,使其看起来像分页,它在那里工作正常,但我面临的问题是 carousel-indicators 列表的 INDEX。任何人都可以帮助解决这个问题吗?提前致谢 :)
这是演示:
https://jsfiddle.net/adampavlov/u6pbca1k/11/
.carousel-indicators li {
width: 32px !important;
height: 42px !important;
border-radius: 0;
line-height: 42px;
font-weight: 500;
text-align: center;
text-indent: inherit;
border: 1px solid transparent;
opacity: 1;
font-size: 18px;
color: #777777;
}
.carousel-indicators li.active {
color: #F85A05;
}
.carousel-indicators .prev,
.carousel-indicators .next {
opacity: 1;
width: 50px;
height: 41px;
border: 1px solid #D8D8D8;
font-size: 30px;
margin: 0 20px;
text-align: center;
}
解决方案
这是因为您的箭头被视为指示器,因为它们位于带有 class 的 div 中carousel-indicators
。相反,他们应该住在这个 div 之外并拥有自己的类,例如carousel-control-prev
和carousel-control-next
。
左箭头被视为分页计数的索引 0,而不是 number 1
。因此,引导程序看到有 4 个元素被视为分页节点[left arrow, 1, 2, 3, right arrow]
,而不仅仅是[1, 2, 3]
.
所以,这样的事情会起作用:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Bootstrap 文档对此有更详细的答案。这是文档的链接。
推荐阅读
- javascript - 我调用 SmartContract Token ERC20,为什么要显示哈希输出?
- python - 如何在 python 中将时间列值从 mm:ss 格式化为 hh:mm:ss?例如,21:34 到 00:21:34
- c# - 您可以通过扩展方法使类可枚举吗?特别是 System.Range
- java - 电话响铃时弹出显示
- android - 如何动态更改bottomNavigationView中的文本内容
- java - 在禁用访问外部 DTD 的情况下,使用 TransformerFactory 将 XML 转换为字符串时出现问题
- api - API Gateway API 的基于 AWS Cognito 的身份验证
- javascript - Vuejs如何从url或router-link输入时阻止路由参数类型改变
- pdf - 无需 Javascript 即可为 Apple 设备一键复制页面
- bash - Bash:读取输入可用(是否有任何按键?)