Мне нужно что бы при навидении на на ютуб ролик который находиться в слайдере ,слайдер останавливался а после когда убираешь курсор запускался обратно ?
var slidesContainer = document.getElementById("slidesContainer2");
var slidesNavigation = document.getElementById("slidesNavigation2");
var rightSliderArrow = document.getElementById("rightSliderArrow2");
var slides = [];
var dots = [];
var newsImages = [
"
https://www.youtube.com/embed/tgbNymZ7vqY",
"
https://www.youtube.com/embed/tgbNymZ7vqY",
"
https://www.youtube.com/embed/tgbNymZ7vqY",
];
for (let i = 0; i < newsImages.length; i++) {
console.log("For loop started!")
// Заполняем слайдер новостями
var newsImage = document.createElement("iframe");
newsImage.className = "slide fade";
newsImage.width = 400;
newsImage.height = 200;
newsImage.src = newsImages[i];
slidesContainer.appendChild(newsImage);
slides.push(newsImage);
var newsDot = document.createElement("div");
newsDot.className = "disabledCircleStyle_BlackWhite navCircle";
slidesNavigation.insertBefore(newsDot, rightSliderArrow)
dots.push(newsDot);
}
dots.forEach(function (element, index) {
element.addEventListener("click", function () {
currentSlide(index + 1);
resetInterval2();
});
});
var slideIndex = 1;
var interval = setInterval(function () {
plusSlides2(1);
}, 6000);
function resetInterval2() {
clearInterval(interval);
interval = setInterval(function () {
plusSlides2(1);
}, 6000);
}
showSlides(slideIndex);
// Next/previous controls
function plusSlides2(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
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("activeCircleStyle_BlackWhite", "disabledCircleStyle_BlackWhite");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className = "activeCircleStyle_BlackWhite navCircle";
}