如何防止引导转盘在单击右/左控件后恢复幻灯片动画
How to prevent Bootstrap carousel from resuming of the slide animation after clicking on right/left controls
我正在使用Bootstrap Carousel来显示一些图像。我已经从carouseldiv中删除了slide
类和data-ride="carousel"
,以便删除自动滑动动画。
但是,当您单击右/左控件之一以更改图像时,幻灯片动画将继续。
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<br>
<div id="myCarousel" class="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
我还尝试在上添加一行jQuery
$("#myCarousel").carousel("pause");
但这似乎无论如何都无济于事。
我能做什么?
感谢
试着使用这行javascript,而不是你在答案末尾写的那行:
$(document).ready(function(){
$("#myCarousel").carousel({interval: 500, pause: "hover"});}
您可以根据需要调整间隔,只要鼠标悬停转盘,即使在使用左/右控件后,间隔也会暂停,希望这会有所帮助!
尝试添加此脚本:
$('#myCarousel').on('slid.bs.carousel', function () {
$(this).carousel('pause');
})
slid.bs.carousel
事件"在转盘完成幻灯片转换时触发".carousel('pause')
方法"停止转盘在项目之间循环"
请检查结果:
$('#myCarousel').on('slid.bs.carousel', function () {
$(this).carousel('pause');
})
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<br>
<div id="myCarousel" class="carousel">
<!-- Indicators -->
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何将javascript事件从web浏览器wpf控件发送到wpf的c#代码
- 如何更改文本框控件的不透明度值
- 所有控件的组合框
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 在angularjs中创建自定义控件的推荐方法
- 自定义控件中的双向绑定在SAPUI5中不起作用
- 如何在ASP中为用户控件添加Javascript对象网
- Dynamics 2016内部部署Crm客户端脚本.选项集控件类型缺少方法
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 在HTML5画布上添加按钮和控件
- 隐藏HTML5视频控件
- 向ASP控件添加自定义事件
- 从IE中的不同元素调用时,文件输入控件未正确启动
- 当用户点击音频控件时,无法接收点击事件
- 谷歌地图API v3.22恢复到旧的控件
- 如何防止引导转盘在单击右/左控件后恢复幻灯片动画