亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>I have created a carousel containing <code>7</code> items. </p> <p>By default, this carousel will display <code>5</code> items. </p> <p>During my demo, I ran into two issues:</p> <ol> <li>The slider is set to <code>infinite loop</code>, but when it returns to slide 1, the progress bar does not reset. </li> <li>Once the slider reaches the end, it immediately jumps back to slide 1 (instead of a smooth transition). </li> <li>Once the 7th slide (7th card) is visible, the progress bar should complete. </li> </ol> <p><code>$slider.slick("getSlick").slideCount</code>'s <code>console.log</code> returns 7, which is the number of items in the slider. So not sure what is causing these issues.</p> <p></p> <pre class="brush:js;toolbar:false;">(function($) { const $slider = $('#slider'); var $progressBar = $('.progressBar__bar'); $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) { var calc = ((nextSlide) / (slick.slideCount - 1)) * 100; $progressBar.css('background-size', calc '% 100%').attr('aria-valuenow', calc); }); $slider.slick({ slidesToShow: 5, slidesToScroll: 1, speed: 400, arrows: true, mobileFirst: true, }); })(jQuery);</pre> <pre class="brush:css;toolbar:false;">.cardSlider { padding: 100px 0; background: black; color: white; } .card { color: black; padding: 50px; text-align: center; } .progressBar__bar { margin-top: 82px; position: relative; display: block; width: 100%; height: 3px; overflow: hidden; background-image: linear-gradient(to right, yellow, yellow); background-repeat: no-repeat; background-size: 5% 100%; transition: background-size 0.5s ease-in-out; } .progressBar__bar[aria-valuenow="0"] { background-size: 5% 100% !important; } .progressBar__bar[aria-valuenow] { height: 5px; } .progressBar__bar:before { content: ""; position: absolute; left: 0; top: 50%; transform: translate(0%, -50%); width: 100%; height: 0.5pt; background-color: white; } .slick-slide { margin: 0px 10px; display: none; float: left; height: 100%; min-height: 1px; outline: none !important; } .slick-slide.slick-loading { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-slide img { width: 100%; display: block; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-track, .slick-list { transform: translate3d(0, 0, 0); transition: all 150ms ease; } .slick-track { position: relative; top: 0; left: 0; align-items: center; width: 100%; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-initialized .slick-slide { display: block; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet"/> <link rel="stylesheet"/> <section class="cardSlider"> <div class="container"> <div class="row"> <div class="col-12"> <div class="cardSlider__listing" id="slider"> <article class="card"> Card 1 </article> <article class="card"> Card 2 </article> <article class="card"> Card 3 </article> <article class="card"> Card 4 </article> <article class="card"> Card 5 </article> <article class="card"> Card 6 </article> <article class="card"> Card 7 </article> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="progressBar"> <div class="progressBar__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </section></pre>

.slick-track,.slick-list {
   transform: translate3d(0, 0, 0);
  transition: all 150ms ease; 
}

.progressBar__bar {
  margin-top: 82px;
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background-image: linear-gradient(to right, yellow, yellow);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s ease-in-out;
}



$(document).ready(function () {

  const slider = $('#slider');
  var progressBar = $('.progressBar__bar');
  //for first time load
  slider.on('init', function (event, slick, currentSlide, nextSlide) {
    currentDot = $(".slick-dots .slick-active").index() + 1;
    dots = slider.find('.slick-dots li').length;
    calc = (currentDot / dots) * 100;
    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.on('afterChange', function (event, slick, currentSlide, nextSlide) {
    var currentDot = $(".slick-dots .slick-active").index() + 1;
    var dots = slider.find('.slick-dots li').length;
    var calc = (currentDot / dots) * 100;

    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    autoplay: false,
    arrows: true,
    mobileFirst: true,
  });
});