Слайдер JavaScript динамически изменяется HTML / CSS, не меняя картинки

Слайдер JavaScript динамически изменяется HTML / CSS, не меняя картинки

У меня есть сайт, где в главном меню есть изображение, которое я хочу менять каждые 5 секунд. Изображение упоминается в классе CSS, и мне нужно, чтобы это изображение менялось каждые 5 секунд на другое изображение. Для этого я написал код JavaScript и добавил дополнительные URL в CSS. Но что-то не так с кодом Javascript, который я не могу уловить. Сначала я получаю сообщение в консоли, что моя переменная MaxSlider не определена. И во-вторых, я думаю, что в моей функции «changeMainSlider» я не указываю правильно.

 {amp}lt;main class="container"{amp}gt; {amp}lt;div class="main-image"{amp}gt; {amp}lt;div class="text"{amp}gt; {amp}lt;div class="title"{amp}gt;Lorem ipsum dolor{amp}lt;/div{amp}gt; {amp}lt;div class="title2"{amp}gt;Lorem ipsum dolor sit amet{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt; .main-image { height: 340px; background: url(img/slide.jpg), url(img/gallery-1.jpg), url(img/gallery-2.jpg) center; background-size: cover; position: relative; margin-bottom: 60px; } var mainSlider = new MaxSlider('.main-slider'); var mainSliderInterval; changeMainSlider(); var main_slider_el = document.getElementsByClassName('.main-slider'); main_slider_el.addEventListener('mouseenter', function () { clearInterval(mainSliderInterval); }); main_slider_el.addEventListener('mouseleave', function () { changeMainSlider(); }); function changeMainSlider() { mainSliderInterval = setInterval(function () { mainSlider.nextItem(); }, 5000); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector