我正在使用bootstrap carousel:
$(document).ready( function() {
$('.carousel').carousel('pause');
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
我从头开始暂停它,这样我就可以在点击按钮时使用滑动功能:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="carousel-tab active"><a href="#">ListOne</a></li>
<li data-target="#myCarousel" data-slide-to="1" class="carousel-tab"><a href="#">ListTwo</a></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-content">
<div id="listOne" class="list-group"></div>
</div>
</div><!-- End Item -->
<div class="carousel-item">
<div class="carousel-content">
<div id="listTwo" class="list-group"></div>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
这很好用。但疯狂的是,当我在笔记本电脑上使用我的页面时,屏幕上有触摸功能并用手指按下按钮而不是用鼠标按下按钮,旋转木马不会暂停&#39;了。有谁知道为什么会这样?这对我来说非常困惑。