ワードプレスでJavascriptスライドショーを作成する

Question

私は最初にコードを学習しています。私はhtml、css、javascript、php、MySqlについていくつかのコースを作っていましたが、私はWordpressの子テーマを構築している間、練習から学び続けることに決めました。

イメージスライドショーを構築しています。それを作る方法を理解するために私はこれを見つけました：http://www.w3schools.com/w3css/w3css_slideshow.asp。

これはシンプルで便利なスライドショーです。それはとても素敵です！しかし、私はWordpressでそれを実装したい場合、いくつかの問題があります。

私はポストタイプを作って、高度なカスタムフィールドプラグインを使ってRepeater Fieldを作成しました。そのコードはWordpressで次のようになります：

<?php get_header(); ?> 

<script> 

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
} 

</script> 


<?php 


if(have_rows('image')): 

    while (have_rows('image')) : the_row(); 


       if(get_sub_field('subimage')) : 

      echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>'; 
      endif; 

    endwhile; 


endif; 

?> 

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a> 
<a class="home-btn-right" onclick="plusDivs(1)">❯</a> 


</div> 

<?php get_footer(); ?> 

これはほぼ完璧です！しかし今私は2つの問題があります：

1）テンプレートを見るために私のページをロードした後。私は最初のイメージが最後のイメージの上に重なっているのを見ます。スライドショーの終わりに

2）が空のスライドがあります：なぜ私は知りません。私は空のサブフィールドがあるように見えますが、私は空のサブフィールドがありません。なぜ空のスライドがあるのか​​わかりません。

いくつかお勧めしますか？

は、私は、問題は自分のget_footer()前の最後のクロージングDIV </div>だと思うあなた

Answer 1

ありがとうございます。これは、ブラウザを失敗させる単純なhtmlマークアップエラーです。あなたのコードは次のようになります：

<?php get_header(); ?> 

<script> 

var slideIndex = 1; 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
} 

</script> 


<?php 

if(have_rows('image')): 
    while (have_rows('image')) : the_row(); 
    if(get_sub_field('subimage')) : 
     echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>'; 
    endif; 
    endwhile; 
endif; 

?> 

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a> 
<a class="home-btn-right" onclick="plusDivs(1)">❯</a> 

<script> 
    showDivs(slideIndex); 
</script> 

<?php get_footer(); ?> 

これで問題が解決しない場合は、教えてください。