试图阻止 bootstrap 旋转木马在悬停时暂停

Question

我有一个 bootstrap 带进度条的旋转木马，它会填满并触发下一张幻灯片。我的问题是，现在当我将鼠标悬停在幻灯片上时轮播暂停，我希望它不要暂停并继续前进。

这是我的代码：

$(document).ready(function(){
    var percent = 0,
    interval =35//it takes about 6s, interval=20 takes about 4s
    $bar = $('#progress-bar'),
    $crsl = $('#carousel-hero');
    $('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
    /*line above just for showing when controls are clicked the bar goes to 0.5% to make more friendly, 
    if you want when clicked set bar empty, change on width:0.5 to width:0*/
    $crsl.carousel({//initialize
        interval: false,
        pause: false
    }).on('slide.bs.carousel', function (){percent = 0;});//This event fires immediately when the bootstrap slide instance method is invoked.
    function progressBarCarousel() {
        $bar.css({width:percent+'%'});
        percent = percent +0.5;
        if (percent>=100) {
            percent=0;
            $crsl.carousel('next');
        }
    }
    var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
    if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
        $crsl.hover(function(){
                    clearInterval(barInterval);
                },
                function(){
                    barInterval = setInterval(progressBarCarousel, interval);
                }
        );
    }
});

还有我的 HTML :

 <div id="carousel-hero" class="carousel slide" data-ride="carousel"><!-- Main Slider -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-hero" data-slide-to="1"></li>
                <li data-target="#carousel-hero" data-slide-to="2"></li>
              </ol>
            <div class="carousel-inner">
                <div class="item active"><!-- First Slide -->
                    <div class="overlay"></div>
                    <img src="images/hero1.jpg" alt="hero-image" class="img-responsive">
                    <div class="carousel-caption"><!-- Tagline -->
                        <h1 class="tagline">WE ARE <span class="colored">NIXO</span> CREATIVE</h1>
                        <h5>Branding | Design | Developement</h5>
                    </div>
                </div>          
                <div class="item"><!-- Second Slide -->
                    <div class="overlay"></div>
                    <img src="images/hero2.jpg" alt="hero-image" class="img-responsive">
                    <div class="carousel-caption"><!-- Tagline -->
                        <h1 class="tagline">WE <span class="colored">ALWAYS</span> DELIVER</h1>
                        <h5>UX | Marketing | Ideas</h5>
                    </div>
                </div>
                <div class="item"><!-- Third Slide -->
                    <div class="overlay"></div>
                    <img src="images/hero3.jpg" alt="hero-image" class="img-responsive">
                    <div class="carousel-caption"><!-- Tagline -->
                        <h1 class="tagline">WE <span class="colored">LOVE</span> DESIGN</h1>
                        <h5>Beautiful | Clean | Inspiring</h5>
                    </div>
                </div>
                <!-- Carousel Controlls -->
               <a id="hero-control-left" class="control-hero control-left" href="#carousel-hero" role="button" data-slide="prev">
                   <span class="pe-7s-angle-left pe-4x" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
                </a>
                <a id="hero-control-right" class="control-hero control-right" href="#carousel-hero" role="button" data-slide="next">
                    <span class="pe-7s-angle-right pe-4x" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div id="progress-bar"></div> <!-- Carousel Progress Bar -->
  </div>

我尝试过的东西：

在js文件中设置暂停：'none'
将 data-pause="false" 添加到轮播
同时有 puase: false 和 data-pause="false"

感谢任何帮助。

Answer 1

将暂停设置为空，数据暂停="false"

$crsl.carousel({//initialize
        interval: false,
        pause: null
 })

<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">

在此处详细了解轮播选项

https://v4-alpha.getbootstrap.com/components/carousel/#options

为了避免进度条停止，请删除 crsl.hover 的代码，该代码会清除进度条的间隔并在模糊时重新启动它。

工作示例：https://jsfiddle.net/ne9x9Lp1/

Answer 2

我遇到了同样的问题。刚刚通过更改 bootstrap js 文件解决了它（在我的例子中 bootstrap.bundle.min.js）

ctrl+f=pause 为了方便找，原来是pause:"hover" 我改成:

暂停："false"

希望这对您有所帮助。

试图阻止 bootstrap 旋转木马在悬停时暂停

Trying to stop bootstrap carousel from pausing on hover

javascript

jquery

carousel

twitter-bootstrap

progress-bar