부트 스트랩 캐 러셀이 호버에서 멈추는 것을 막으려 고합니다

Question

나는 진행 막대가 채워진 부트 스트랩 회전 목마를 가지고 다음 슬라이드를 시작합니다. 내 문제는 바로 슬라이드 위에 마우스를 올려 놓으면 멈추지 않고 계속 가고 싶을 때 슬라이드가 멈추는 것입니다.

$(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 파일에

• 일시 정지 설정 : '없음'
을 여기에
내 코드입니다
• 캐롤라이나에 데이터 일시 중지 = "거짓"추가
• puase : false 및 data-pause = "false"동시에 표시

도움이 필요합니다.

Answer 1

설정 일시 정지 NULL로하고

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

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

이 crsl에 대한 코드를 제거 여기

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

진행 표시 줄을 피하기위한 회전 목마 옵션에 대해 자세히 읽기 중지 = "false"로 데이터 일시 정지 .hover는 진행률 막대의 간격을 지우고 흐리게 처리 할 때 다시 시작합니다.

동작 예 : https://jsfiddle.net/ne9x9Lp1/