slick carousel

    // slick carousel
    var time = 2;
    var $bar,
    $slick,
    isPause,
    tick,
    percentTime;

    $slick = $('.product-carousel-list');
    $slick.slick({
    speed: 1200,
    arrows: true,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 4,
    focusOnSelect: true,
    prevArrow: $('.slider-arrow.left'),
    responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
    ]

    });

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

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

    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();

    $('.slick-next, .slick-prev').click(function() {
    startProgressbar();
    });