How to stop the slider when you hover over it?

var slideIndex = 1; showSlides(slideIndex); var slideIndex = 1; showSlides(slideIndex); /* Функция увеличивает индекс на 1, показывает следующй слайд*/ function plusSlide() { showSlides(slideIndex += 1); } /* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/ function minusSlide() { showSlides(slideIndex -= 1); } /* Устанавливает текущий слайд */ function currentSlide(n) { showSlides(slideIndex = n); } /* Основная функция слайдера */ function showSlides(n) { var i; var slides = document.getElementsByClassName("item"); var dots = document.getElementsByClassName("slider-dots_item"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } setInterval(plusSlide, 4000); 
  /* Собственно сам слайдер */ .slider { overflow: hidden; max-width: 100%; position: relative; margin: auto; height: 300px; margin-bottom: 15px; } /* Картинка мастабируется по отношению к родительскому элементу */ .slider .item img { object-fit: cover; width: 100%; height: 300px; border: none !important; box-shadow: none !important; } /* Кнопки вперед и назад */ .slider .prev, .slider .next { cursor: pointer; position: absolute; width: auto; top: 0; top: 50%; margin-top: -22px; padding: 18px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .next { right: 0; border-radius: 3px 0 0 3px; } .slider .prev { left: 10px; } /* При наведении на кнопки добавляем фон кнопок */ .slider .prev:hover, .slider .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Заголовок слайда */ .slideText { position: absolute; color: #fff; font-size: 35px; /* Выравнивание текста по горизонтали и по вертикали */ left: 50%; top: 50%; transform: translate(-50%, -50%); /* Тень */ text-shadow: 1px 1px 1px #000, 0 0 1em #000; } /* Кружочки */ .slider-dots { text-align: center; } .slider-dots_item { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #ddd; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .slider-dots_item:hover { background-color: #aaa; } /* Анимация слайдов */ .slider .item { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } 
 <div class="slider"> <div class="item"><a href="#"><img src="https://avatars.mds.yandex.net/get-pdb/33827/e27a7c31-aa08-4b03-bf93-c6ec7c7e1857/s1200" alt="Первый слайд" /></a></div> <div class="item"><a href="#"><img src="https://avatars.mds.yandex.net/get-pdb/33827/e27a7c31-aa08-4b03-bf93-c6ec7c7e1857/s1200" alt="Второй слайд" /></a></div> <div class="item"><a href="#"><img src="https://avatars.mds.yandex.net/get-pdb/33827/e27a7c31-aa08-4b03-bf93-c6ec7c7e1857/s1200" alt="Третий слайд" /></a></div> <div class="item"><a href="#"><img src="https://avatars.mds.yandex.net/get-pdb/33827/e27a7c31-aa08-4b03-bf93-c6ec7c7e1857/s1200" alt="Четвертый слайд" /></a></div> <a class="prev" onclick="minusSlide()">❮</a> <a class="next" onclick="plusSlide()">❯</a></div> <div class="slider-dots"><span class="slider-dots_item" onclick="currentSlide(1)"></span> <span class="slider-dots_item" onclick="currentSlide(2)"></span> <span class="slider-dots_item" onclick="currentSlide(3)"> </span> <span class="slider-dots_item" onclick="currentSlide(4)"> </span></div>

  • You have a slide triggered at the end due to setInterval 4000 ... well, instead of these 4000, you can write a variable. Which is initially equal to 4000. And when you hover it becomes 999999 (not stop, but a lot of stupid). It is still attached to classes ... 'mouseenter' can remove classes from where it is necessary and break the slider. And 'mouseleave' - to return the classes in place. - OPTIMUS PRIME
  • 2
    @OPTIMUSPRIME what you have suggested will not work - Stranger in the Q

1 answer 1

need to add something

  var hover; document.querySelector('.slider') .addEventListener('mousemove', () => hover = 1); document.querySelector('.slider') .addEventListener('mouseout', () => hover = 0); setInterval(() => !hover && plusSlide(), 4000);

and remove it

  setInterval(plusSlide, 4000);
  • Thank you very much! - Funny World
  • All set, thanks again! - Funny World