Есть ли способ сбросить слайдер на изображение 1?

Question

Я пытаюсь создать слайдер, который будет работать при наведении, но есть одна вещь, которую я хотел бы добавить, это сброс. Например, если посетитель наводит курсор на слайд-шоу, а он находится на 4-м изображении, то когда он поднимается и снова наводится на него, то слайд должен начинаться с изображения 1, а не с изображения 4. Пожалуйста, помогите!

Вот код.

jQuery(function($) {
      $('.slides').cycle({
        fx: 'none',
        speed: 4000,
        timeout: 70,
      }).cycle("pause");

      $('.slideshow-block').hover(function() {
        $(this).find('.slides').addClass('active').cycle('resume');
      }, function() {
        $(this).find('.slides').removeClass('active').cycle('pause');
      });

* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

.slideshow-block {
  position: relative;
  width: 1150px;
  height: 530px;
  overflow: hidden;
  background: url('img/3-1.png');
}

.slides {
  z-index: 0;
  visibility: hidden;
}

.slides.active {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <div class="slideshow-block">
    <ul class="slides">
      <li><img src="img/3-1.png" /></li>
      <li><img src="img/3-2.png" /></li>
      <li><img src="img/3-3.png" /></li>
      <li><img src="img/3-4.png" /></li>
      <li><img src="img/3-5.png" /></li>
      <li><img src="img/3-6.png" /></li>
    </ul>
  </div>

Answer 1

Это может помочь вам:

$('.slideshow-block').hover(function(){
     setTimeout(function () {
         $('.slides').cycle(0);
     }, 100);
     $(this).find('.slides').addClass('active').cycle('resume');

 }, function(){
     $(this).find('.slides').removeClass('active').cycle('pause');

 });