Как я могу сбросить индикатор выполнения jQuery при перетаскивании мышью?

Я установил карусель Slick на свой сайт вместе с некоторым кодом, который я нашел для красивого индикатора выполнения. Однако, хотя индикатор выполнения сбрасывается при нажатии кнопок «предыдущий» и «следующий», он не сбрасывается при перетаскивании ползунка.

Я поигрался с событиями jQuery, но не могу найти ни одного, подходящего для щелчка и перетаскивания.

Мой сайт - http://bp112.betapark.co.uk/, а вот код jQuery:

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

  $slick = $('.slider');
  $slick.slick({
    draggable: false,
    arrows: true,
    speed: 1200,
    adaptiveHeight: false
  });

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

});
</script>

jquery events carousel slick.js

27.10.2018 15:43

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

858

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать приятные события. Например, beforeChange или afterChange и поместите туда свое действие, а не щелчок: http://kenwheeler.github.io/slick/

$slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  startProgressbar();
});

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

      $slick = $('.regular');
      $slick.slick({
        draggable: true,
        arrows: true,
        speed: 1200,
        adaptiveHeight: false
      });

      $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.on('beforeChange', function(event, slick, currentSlide, nextSlide){
        startProgressbar();
      });
      
});

.slider-progress {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 0;
}
.slider-progress .progress {
  width: 0%;
  height: 10px;
  background: #E74C3C;
}



/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}

.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

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


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

  <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <script src = "https://code.jquery.com/jquery-2.2.0.min.js" type = "text/javascript"></script>
   <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<section class = "regular slider">
    <div>
      <img src = "http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=6">
    </div>
  </section>
  <div class = "slider-progress">        <div class = "progress"></div>    </div>

ИЗМЕНИТЬ 1

Чтобы остановиться при опрокидывании, используйте pauseOnHover: true на скользком слайдере (правила документации: http://kenwheeler.github.io/slick/!;)) И работайте с очень полезной переменной isPause, чтобы остановить панель:

$slick.on("mouseenter", function(){
   isPause = true;
}).on("mouseleave", function(){
   isPause = false;
})

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

      $slick = $('.regular');
      $slick.slick({
        draggable: true,
        arrows: true,
        speed: 1200,
        adaptiveHeight: false,
        pauseOnHover: true /* add this option */
      });

      $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.on('beforeChange', function(event, slick, currentSlide, nextSlide){
        startProgressbar();
      });

      $slick.on("mouseenter", function(){
        isPause = true;
      }).on("mouseleave", function(){
        isPause = false;
      })
      
});

.slider-progress {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 0;
}
.slider-progress .progress {
  width: 0%;
  height: 10px;
  background: #E74C3C;
}



/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}

.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

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


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

  <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <script src = "https://code.jquery.com/jquery-2.2.0.min.js" type = "text/javascript"></script>
   <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class = "regular slider">
    <div>
      <img src = "http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src = "http://placehold.it/350x300?text=6">
    </div>
  </section>
  <div class = "slider-progress">        <div class = "progress"></div>    </div>

Извините, последний вопрос - есть ли еще способ приостановить и карусель, и индикатор выполнения при наведении курсора? Спасибо.

— 29.10.2018 01:38

Я отредактировал свой ответ и для этого. Но Майки, пожалуйста, прочти документацию! Это очень полезно (для каждого плагина), и это первый шаг, который вам нужно сделать, чтобы обратиться за помощью. Ваше здоровье. :)

— 29.10.2018 08:59

Еще раз спасибо. Я новичок в jQuery, и ранее я пробовал добавить pauseOnHover, что, конечно, не сработало, поскольку мне не хватало другой части кода. Еще раз большое спасибо !! :)

— 30.10.2018 12:18

Пожалуйста, Майки. К счастью, ТАК тоже существует, чтобы помочь нам! Ваше здоровье! ;)

— 30.10.2018 12:25

28.10.2018 18:49