Изображение слайдера не работает

Question

Я сделал слайдер изображения, но это не меняет изображения, просто показывая первое изображение.

Это мой Javascript

$(document).ready(function() { 
    var slides = document.querySelectorAll('#images .image'); 
    var current = 0; 


    function nextImage() { 
    image[currentSlide].className = 'slide'; 
    current = (current+1)%images.length; 
    images[current].className = 'image show'; 
    } 
    var Interval = setInterval(nextImage,2000); 
}); 

HTML:

<ul id="images"> 
    <li class="image show">Slide 1</li> 
    <li class="image">Slide 2</li> 
    <li class="image">Slide 3</li> 
    <li class="image">Slide 4</li> 
    <li class="image">Slide 5</li> 
</ul> 

Я использую JQuery 3.1.0 и он не работает

Answer 1

Я проверил ваш код и, похоже, работает нормально, кроме ненужного вызова nextSlide() рядом с готовым документом. Возможно, это ваш CSS? Пожалуйста, запустите этот рабочий фрагмент кода:

$(document).ready(function() { 
 
\t var slides = $('#slides .slide'); 
 
\t var currentSlide = 0; 
 
\t var slideInterval = setInterval(nextSlide, 2000); 
 

 
\t function nextSlide() { 
 
\t \t slides.removeClass('showing'); 
 
\t \t currentSlide = (currentSlide + 1) % slides.length; 
 
\t \t slides.eq(currentSlide).addClass('showing'); 
 
\t } 
 
});

.slide {display:none;} 
 
.showing {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ul id="slides"> 
 
    <li class="slide showing">Slide 1</li> 
 
    <li class="slide">Slide 2</li> 
 
    <li class="slide">Slide 3</li> 
 
    <li class="slide">Slide 4</li> 
 
    <li class="slide">Slide 5</li> 
 
</ul>

Я удалил смешанный ванильный JS и использовать JQuery, чтобы держать вещи более последовательным.

Некоторые другие вещи, чтобы проверить, как Javascript не может быть запущен на всех:

• Проверка на наличие ошибок в консоли
• Check вы ссылаетесь Jquery правильно (перед кодом, теги сценария анализируется и выполняется сверху вниз, если не указано иное)
• Убедитесь, что у вас есть только один $(document).ready на страницу.

Answer 2

Я обновил свой JS код немного, вы можете попробуйте с этим

$(document).ready(function() { 
    var slides = document.querySelectorAll('#slides .slide'); 
    console.log(slides); 
    var currentSlide = 0; 
    var slideInterval = setInterval(nextSlide,2000); 

    function nextSlide() { 
    slides[currentSlide].className = 'slide'; 
    currentSlide = currentSlide + 1; 
    if (slides.length == currentSlide) { 
     currentSlide = 0; 
    } 
    slides[currentSlide].className = 'slide showing'; 
    } 
    nextSlide() 
});