1つのページに複数のスライドショー

Question

私は1つのページに複数のスライドショーを追加することに本当に苦労しています。 1つは本当にうまく動作しますが、2番目のものを追加するとただちにクラッシュします。

私はこの問題がJavascriptにあると思いますが、私は本当にclouを持っていません。私はそれについて何ができるのですか？すでにたくさん試しました...

誰かがいくつかのアイデアを持っているなら、私は本当にそれを感謝します。 すでにサポートいただきありがとうございます。

これは、HTMLがどのように見えるかです：

<!-- slideshow 1 --> 

    <div class="slidercontainer"> 
      <div class="showSlide fade"> 
       <img src="images/img1.jpg" /> 
     </div> 
     <div class="showSlide fade"> 
      <img src="images/img2.jpg"/> 
     </div> 

     <div class="showSlide fade"> 
      <img src="images/img3.jpg"/> 
     </div> 



    <!-- Navigation arrows --> 
      <a class="left" onclick="nextSlide(-1)">LEFT</a> 
      <a class="right" onclick="nextSlide(1)">RIGHT</a> 
     </div> 

<p> text between slideshow </p> 

    <!-- slideshow 2 --> 


    <div class="slidercontainer"> 
     <div class="showSlide fade"> 
      <img src="images/img1.jpg" /> 
     </div> 
     <div class="showSlide fade"> 
      <img src="images/img2.jpg"/> 
     </div> 

     <div class="showSlide fade"> 
      <img src="images/img3.jpg"/> 
     </div> 



    <!-- Navigation arrows --> 
     <a class="left" onclick="nextSlide(-1)">LEFT</a> 
     <a class="right" onclick="nextSlide(1)">RIGHT</a> 
    </div> 

CSS：

body { 
margin: 0; 
background: #e6e6e6; 
    } 
    .showSlide { 
     display: none 
    } 
     .showSlide img { 
      width: 100%; 
     } 
    .slidercontainer { 
     max-width: 65vw; 
     position: relative; 
     background: red; 
    } 
    .left, .right { 
     cursor: pointer; 
     position: absolute; 
     top: 0; 
     height: 100%; 
     width: 50%; 
     color: white; 
     font-weight: bold; 
     font-size: 18px; 
     transition: 0.6s ease; 
     border-radius: 0 3px 3px 0; 
    } 
    .right { 
     right: 0; 
     border-radius: 3px 0 0 3px; 
    } 
     .left:hover, .right:hover { 
      background-color: rgba(115, 115, 115, 0.8); 
     } 

    .active { 
     background-color: #717171; 
    } 
    /* Fading animation */ 
    .fade { 
     -webkit-animation-name: fade; 
     -webkit-animation-duration: 1.5s; 
     animation-name: fade; 
     animation-duration: 1.5s; 
    } 
    @-webkit-keyframes fade { 
     from { 
      opacity: .4 
     } 
     to { 
      opacity: 1 
     } 
    } 

    @keyframes fade { 
     from { 
      opacity: .4 
     } 
     to { 
      opacity: 1 
     } 
    } 

Javascriptを：

var slide_index = 1; 
displaySlides(slide_index); 
function nextSlide(n) { 
displaySlides(slide_index += n); 
    } 

    function currentSlide(n) { 
     displaySlides(slide_index = n); 
    } 
    function displaySlides(n) { 
     var i; 
     var slides = document.getElementsByClassName("showSlide"); 
     if (n > slides.length) { slide_index = 1 } 
     if (n < 1) { slide_index = slides.length } 
     for (i = 0; i < slides.length; i++) { 
      slides[i].style.display = "none"; 
     } 
     slides[slide_index - 1].style.display = "block"; 
    } 

Answer 1

あなたの現在の問題は、あなたのギャラリーには、クラス名showSlideを持つすべての要素を前提としていることですギャラリーに属していますが、これはあなたが何をしているかではありません。

代わりにあなたがトリガされるべきギャラリー指定する必要があります

document.getElementsByClassName("showSlide"); 

を持つ要素を選択します。 ギャラリーIDをnextSlide()機能に送信してみます。これにより、適切なギャラリーのスライドを正確に選択することができます。

<div class="slidercontainer" id="gallery1"> 
    ... 
</div> 

この方法では、あなたのnextSlide機能では、あなたがそのIDを取得しますので、

function nextSlide(n, gallery) { 
    displaySlides(slide_index += n, gallery); 
} 

ようdisplaySlidesに渡し：

<a class="left" onclick="nextSlide(-1, 'gallery1')">LEFT</a> 

と識別子各ギャラリーコンテナを与えますギャラリーを初期化するときは、すべてのギャラリーを繰り返し動的にループさせる必要があります。

var galleries = document.querySelectorAll('.slidercontainer'); 
for (i = 0 ; i < galleries.length ; i++) { 
    displaySlides(slide_index, galleries[i]); 
} 

、最終的には、それがうまくいくように

var slides = document.querySelector('#' + gallery + ' .showSlide'); 

は思え適切ギャラリーのためにのみスライドを選択します。私は自分でそれをテストしていない、おそらくこの全体を少し異なる実装するだろうが、あなたの質問としては、これは大丈夫だろう。不明な点がある、またはうまくいかない場合は、コメントを削除してみてください。