スライドショーのハングアップ

Question

スライドショーを作成しようとしています。私はこのためにw3Schools tutorialに従っています。

私のようなので、HTMLで私のスライドを持っている：

<div class="slide fade"> 
    <img src="assets/home_slide1.png" style="width:100%"> 
</div> 
<div class="slide fade"> 
    <img src="assets/home_slide2.png" style="width:100%"> 
</div> 

と（ほぼ文字通りのチュートリアルからコピーされます）、JSの私のスライドショー機能を：

var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("slide");//jquery, use $(".slide"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 5000); // Change image every 5 seconds 
} 

それが表示されていません私のコンソールの理由は、

TypeError: slides[(slideIndex - 1)] is undefined 

私がデバッグすると、varスライドが入力されることはありませんので、slides [0]は未定義です。トラブルシューティングでこれがなぜ起こっているのか、私は何が分かりませんか？

Answer 1

私の問題は、（私はあなたが私が掲載したコードからこれを見ているとは思わなかった）、私はdocument.ready（function {}）にshowSlides（）を呼び出すことができませんでした。

私はそれが何かそんなに似ていることは知っていましたが、それが何であるかを知るのに十分な経験はありませんでした。