@vlad447

Как остановить слайдер на js при наведении на YouTube видио?

Мне нужно что бы при навидении на на ютуб ролик который находиться в слайдере ,слайдер останавливался а после когда убираешь курсор запускался обратно ?

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";

}
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы