So ersetzen Sie Timer-Seitenumbruch mit Fortschrittsbalken mit glatter Schieberegler

Question

So versuche ich apple.com Art von Karussell zu kopieren. Ich wollte einen Timer-Paginierung haben, so weit habe ich so viel getan: jsfiddle

Wie kann ich Paginierung Schaltflächen mit Fortschrittsbalken ersetzen? Hier ist, was ich bisher:

$(document).ready(function() { 
 
    var time = 2; 
 
    var $bar, 
 
    $slick, 
 
    isPause, 
 
    tick, 
 
    percentTime; 
 

 
    $slick = $('.slider'); 
 
    $slick.slick({ 
 
    draggable: true, 
 
    adaptiveHeight: false, 
 
    dots: true, 
 
    mobileFirst: true, 
 
    pauseOnDotsHover: true, 
 
    }); 
 

 
    $bar = $('.slider-progress .progress'); 
 

 
    $('.slider-wrapper').on({ 
 
    mouseenter: function() { 
 
     isPause = true; 
 
    }, 
 
    mouseleave: function() { 
 
     isPause = false; 
 
    } 
 
    }) 
 

 
    function startProgressbar() { 
 
    resetProgressbar(); 
 
    percentTime = 0; 
 
    isPause = false; 
 
    tick = setInterval(interval, 10); 
 
    } 
 

 
    function interval() { 
 
    if (isPause === false) { 
 
     percentTime += 1/(time + 0.1); 
 
     $bar.css({ 
 
     width: percentTime + "%" 
 
     }); 
 
     if (percentTime >= 100) { 
 
     $slick.slick('slickNext'); 
 
     startProgressbar(); 
 
     } 
 
    } 
 
    } 
 

 
    function resetProgressbar() { 
 
    $bar.css({ 
 
     width: 0 + '%' 
 
    }); 
 
    clearTimeout(tick); 
 
    } 
 
    startProgressbar(); 
 
});

.slider-wrapper { 
 
    width: 600px; 
 
} 
 
.slider { 
 
    width: 600px; 
 
    height: 400px; 
 
    border: 1px solid #000; 
 
} 
 
.slide { 
 
    width: 100%; 
 
    height: 398px; 
 
    background: #ccc; 
 
} 
 
#slick-1 .slick-dots li { 
 
    width: 40px; 
 
    height: 5px; 
 
    background: #ccc; 
 
} 
 
#slick-1 .slick-dots li button { 
 
    width: 40px; 
 
    height: 5px; 
 
} 
 
#slick-1 .slick-dots li.slick-active, 
 
#slick-1 .slick-dots li:hover { 
 
    background: #777; 
 
} 
 
#slick-1 .slick-dots li button, 
 
#slick-1 .slick-dots li button:before { 
 
    color: transparent; 
 
    opacity: 0; 
 
} 
 
/* progress bar */ 
 

 
.slider-progress { 
 
    width: 100%; 
 
    height: 3px; 
 
    background: #eee; 
 
} 
 
.slider-progress .progress { 
 
    width: 0%; 
 
    height: 3px; 
 
    background: #000; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/> 
 

 

 
<div class="slider-wrapper" id="slick-1"> 
 
    <div class="slider"> 
 
    <div class="slide">slider #1</div> 
 
    <div class="slide">slider #2</div> 
 
    <div class="slide">slider #3</div> 
 
    </div> 
 
    <div class="slider-progress"> 
 
    <div class="progress"></div> 
 
    </div> 
 
</div>

Answer 1

Das musste ich gestern für meine Firma machen. Es war etwas kniffliger, weil Slick auf unserer Website mit 2 Übergängen implementiert ist: Swipe, wenn wir die Maus verwenden, verblassen wenn wir nicht ..

Wie auch immer, ich erinnerte mich an Ihren Beitrag, als ich gestern ein bisschen graben Ich habe es hier einfacher gemacht.

$(".slider").slick({ 
 
    infinite: true, 
 
    arrows: false, 
 
    dots: false, 
 
    autoplay: false, 
 
    speed: 800, 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
}); 
 

 
//ticking machine 
 
    var percentTime; 
 
    var tick; 
 
    var time = 1; 
 
    var progressBarIndex = 0; 
 

 
    $('.progressBarContainer .progressBar').each(function(index) { 
 
     var progress = "<div class='inProgress inProgress" + index + "'></div>"; 
 
     $(this).html(progress); 
 
    }); 
 

 
    function startProgressbar() { 
 
     resetProgressbar(); 
 
     percentTime = 0; 
 
     tick = setInterval(interval, 10); 
 
    } 
 

 
    function interval() { 
 
     if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true") { 
 
      progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex"); 
 
      startProgressbar(); 
 
     } else { 
 
      percentTime += 1/(time + 5); 
 
      $('.inProgress' + progressBarIndex).css({ 
 
       width: percentTime + "%" 
 
      }); 
 
      if (percentTime >= 100) { 
 
       $('.single-item').slick('slickNext'); 
 
       progressBarIndex++; 
 
       if (progressBarIndex > 2) { 
 
        progressBarIndex = 0; 
 
       } 
 
       startProgressbar(); 
 
      } 
 
     } 
 
    } 
 

 
    function resetProgressbar() { 
 
     $('.inProgress').css({ 
 
      width: 0 + '%' 
 
     }); 
 
     clearInterval(tick); 
 
    } 
 
    startProgressbar(); 
 
    // End ticking machine 
 

 
    $('.progressBarContainer div').click(function() { 
 
    \t clearInterval(tick); 
 
    \t var goToThisIndex = $(this).find("span").data("slickIndex"); 
 
    \t $('.single-item').slick('slickGoTo', goToThisIndex, false); 
 
    \t startProgressbar(); 
 
    });

h3 { 
 
    margin:5px 0; 
 
} 
 

 
.sliderContainer { 
 
    position: relative; 
 
} 
 

 
.slider { 
 
    width: 500px; 
 
    margin: 30px 50px 50px; 
 
} 
 

 
.slick-slide { 
 
    background: #3a8999; 
 
    color: white; 
 
    padding: 80px 0 120px; 
 
    font-size: 30px; 
 
    font-family: "Arial", "Helvetica"; 
 
    text-align: center; 
 
} 
 

 
.slick-prev:before, 
 
.slick-next:before { 
 
    color: black; 
 
} 
 

 
.slick-dots { 
 
    bottom: -30px; 
 
} 
 

 
.slick-slide:nth-child(odd) { 
 
    background: #e84a69; 
 
} 
 

 
.progressBarContainer { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    width:300px; 
 
    left:150px; 
 
} 
 

 
.progressBarContainer div { 
 
    display: block; 
 
    width: 30%; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    margin-right: 5%; 
 
    float: left; 
 
    color: white; 
 
} 
 

 
.progressBarContainer div:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.progressBarContainer div span.progressBar { 
 
    width: 100%; 
 
    height: 4px; 
 
    background-color: rgba(255, 255, 255, 0.4); 
 
    display: block; 
 
} 
 

 
.progressBarContainer div span.progressBar .inProgress { 
 
    background-color: rgba(255, 255, 255, 1); 
 
    width: 0%; 
 
    height: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script> 
 
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/> 
 

 
<div class="sliderContainer"> 
 
    <div class="slider single-item"> 
 
    <div>Slide1</div> 
 
    <div>Slide2</div> 
 
    <div>Slide3</div> 
 
    </div> 
 
    <div class="progressBarContainer"> 
 
    <div> 
 
     <h3>Slide 1</h3> 
 
     <span data-slick-index="0" class="progressBar"></span> 
 
    </div> 
 
    <div> 
 
     <h3>Slide 2</h3> 
 
     <span data-slick-index="1" class="progressBar"></span> 
 
    </div> 
 
    <div> 
 
     <h3>Slide 3</h3> 
 
     <span data-slick-index="2" class="progressBar"></span> 
 
    </div> 
 
    </div> 
 
</div>

[codepen] [1]

Grüße,

Answer 2

Ich bin nicht ganz vollständig mit diesen vertraut, aber es scheint, dass Sie in der Lage gewesen, die progressbar zum Laufen zu bringen, so ist es nicht so schwer sein sollte um die Paginierungsschaltflächen in Fortschrittsbalken umzuwandeln.

Was hilft, ist, dass jeder von ihnen eine Element-ID hat (zuerst ist "slick-slide00") und der aktive hat eine Klasse "slick-active".

Also, wenn Sie eine hacky Lösung wollen, könnte es reichen, "slick-active" -Element bei jedem Wechsel der Folie (es sollte hörbares Ereignis dafür sein) abrufen und schalten Sie das Element mit "slick-active" -Klasse in ein Fortschrittsbalken.

Für eine "sauberere" Lösung müssen Sie sich vielleicht selbst in das Framework einarbeiten, da das Feature ab sofort nicht unterstützt wird.