小编daz*_*ola的帖子

如何在输入焦点上暂停Bootstrap轮播

我有一个Bootstrap轮播,其中包含一个简单的表格.您可以将旋转木马设置为悬停时暂停.但是,如果光标在输入中键入时离开Carousel区域,则轮播将恢复为其默认周期和5000ms的间隔.

我希望将其设置为在输入焦点和输入焦点重启循环期间保持暂停.

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
    <div id="slide1" class="item">
        This is a test slide.
    </div>
    <div id="slide2" class="item" >
        <input type="text" placeholder="name" name="full_name" />
    </div>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

</div>

<script>

!function ($) {
    $(function(){
        $('#myCarousel.slide').carousel({
            interval: 5000,
            pause: "hover"
        })
    })
}(window.jQuery)

$('input').focus(function(){
    $("#myCarousel").pause()
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */


</script>
Run Code Online (Sandbox Code Playgroud)

看起来,一旦最初调用旋转木马(并设置了间隔),您就无法改变该间隔或旋转木马的行为.

任何见解都会很棒.

javascript jquery carousel twitter-bootstrap

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

carousel ×1

javascript ×1

jquery ×1

twitter-bootstrap ×1