W3.CSSを使用した複数のスライドショーの問題

Question

ポートフォリオのWebサイトを作成しようとしています。プロジェクトを表示するためにモーダルを使用したいと思います。私はW3.CSSフレームワークを使用しています。

私の問題は、すべてのスライドショーが機能するわけではなく、最初のスライドショーだけであることです。他のものは正しく表示されず、私が見ることができるのはナビゲーション矢印です。私は私のJavascript関数をすべてのモーダルに対してリセットする必要があると推測していますが、私はJavascriptについて理解しているものとは違うことを試しましたが、うまくいきません。

お願いします！

これは私のHTMLです：

<div class="w3-col" style="width:20.93%;"> 
       <img onclick="document.getElementById('dposters0001').style.display='block'" src="portfolio/design/posters/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/> 
       <div id="dposters0001" class="w3-modal"> 
        <div class="w3-modal-content w3-card-4 w3-animate-zoom"> 
         <header class="w3-container w3-red"> 
          <span onclick="document.getElementById('dposters0001').style.display='none'" class="w3-closebtn w3-padding-top">×</span> 
          <h2>Tourism</h2> 
         </header> 
         <div class="w3-row"> 
          <div class="w3-container w3-third"> 
           <h1>Brief</h1> 
           <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
          </div> 
          <div class="w3-container w3-twothird w3-padding-16"> 
           <div class="w3-content w3-display-container w3-center"> 
            <img class="mySlides" src="portfolio/design/posters/0001a.jpg" style="max-height:80vh;width:auto;"> 
            <img class="mySlides" src="portfolio/design/posters/0001b.jpg" style="max-height:80vh;width:auto;"> 
            <img class="mySlides" src="portfolio/design/posters/0001c.jpg" style="max-height:80vh;width:auto;"> 
            <div class="w3-center w3-section w3-large w3-text-red w3-display-bottomleft" style="width:100%"> 
             <div class="w3-left w3-padding-left w3-hover-text-black" onclick="plusDivs(-1)">❮</div> 
             <div class="w3-right w3-padding-right w3-hover-text-black" onclick="plusDivs(1)">❯</div> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span> 
            </div> 
           </div> 
          </div> 

         </div> 
         <div class="w3-container w3-light-grey w3-padding"> 
          <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0001').style.display='none'">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="w3-col" style="width:20.93%;"> 
       <img onclick="document.getElementById('dposters0002').style.display='block'" src="portfolio/design/posters/0002a.jpg" style="width:100%;" class="w3-hover-opacity"/> 
       <div id="dposters0002" class="w3-modal"> 
        <div class="w3-modal-content w3-card-4 w3-animate-zoom"> 
         <header class="w3-container w3-red"> 
          <span onclick="document.getElementById('dposters0002').style.display='none'" class="w3-closebtn w3-padding-top">×</span> 
          <h2>Tourism</h2> 
         </header> 
         <div class="w3-row"> 
          <div class="w3-container w3-third"> 
           <h1>Brief</h1> 
           <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
          </div> 
          <div class="w3-container w3-twothird w3-padding-16"> 
           <div class="w3-content w3-display-container w3-center"> 
            <img class="w3-card-4" src="portfolio/design/posters/0002a.jpg" style="max-height:80vh;width:auto;"> 
           </div> 
          </div> 
         </div> 
         <div class="w3-container w3-light-grey w3-padding"> 
          <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0002').style.display='none'">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="w3-col" style="width:20.93%;"> 
       <img onclick="document.getElementById('dposters0003').style.display='block'" src="portfolio/design/books/0001a.jpg" style="width:100%;" class="w3-hover-opacity"/> 
       <div id="dposters0003" class="w3-modal"> 
        <div class="w3-modal-content w3-card-4 w3-animate-zoom"> 
         <header class="w3-container w3-red"> 
          <span onclick="document.getElementById('dposters0003').style.display='none'" class="w3-closebtn w3-padding-top">×</span> 
          <h2>Tourism</h2> 
         </header> 
         <div class="w3-row"> 
          <div class="w3-container w3-third"> 
           <h1>Brief</h1> 
           <p>Brief is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
          </div> 
          <div class="w3-container w3-twothird w3-padding-16"> 
           <div class="w3-content w3-display-container w3-center"> 
            <img class="mySlides" src="portfolio/design/books/0001a.jpg" style="max-height:80vh;width:auto;"> 
            <img class="mySlides" src="portfolio/design/books/0001b.jpg" style="max-height:80vh;width:auto;"> 
            <img class="mySlides" src="portfolio/design/books/0001c.jpg" style="max-height:80vh;width:auto;"> 
            <div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%"> 
             <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> 
             <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(1)"></span> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(2)"></span> 
             <span class="w3-badge demo w3-border w3-hover-white" onclick="currentDiv(3)"></span> 
            </div> 
           </div> 
          </div> 

         </div> 
         <div class="w3-container w3-light-grey w3-padding"> 
          <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('dposters0003').style.display='none'">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 

これはCSSです：

.mySlides 
{ 
display: none; 
} 
.w3-left, .w3-right, .w3-badge 
{ 
cursor: pointer; 
} 
.w3-badge 
{ 
height: 13px; 
width: 13px; 
padding: 0; 
background-color: transparent; 
} 

そして、これはJavascriptを次のとおりです。

var slideIndex = 1; 
showDivs(slideIndex); 

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

function currentDiv(n) { 
    showDivs(slideIndex = n); 
} 

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

Answer 1

今日は正確に同じ問題を抱えていたし、最終的にそれを解決しました。

あなたがしなければならないことは、クラスと機能の最後に名前を付け加えて、javascriptが異なるスライドショーのそれぞれを区別できるようにすることです。

たとえば、私のコードでは、最初のスライドショーには「3rdfloor」を追加し、次は「4thfloor」を追加しました。

<div id="3rd Floor" class="w3-container city" style="display:none"> 
    <div class="container 75%"> 
     <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs3rdfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">&#10095;</a> 
     <div class="w3-display-container 3rdfloor"> <img src="images/32B/32BFloorplan.jpg" style="width:100%"> 
      <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div> 
     </div> 
     <div class="w3-display-container 3rdfloor"> <img src="images/32B/kitchen1.JPG" style="width:100%"> 
      <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Kitchen </div> 
     </div> 
     </div> 
     <script> 
    var slideIndex3rdfloor = 1; 
    showDivs3rdfloor(slideIndex3rdfloor); 

    function plusDivs3rdfloor(n) { 
     showDivs3rdfloor(slideIndex3rdfloor += n); 
    } 

    function showDivs3rdfloor(n) { 
     var i; 
     var x = document.getElementsByClassName("3rdfloor"); 
     if (n > x.length) {slideIndex3rdfloor = 1}  
     if (n < 1) {slideIndex3rdfloor = x.length} 
     for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
     } 
     x[slideIndex3rdfloor-1].style.display = "block"; 
    } 
    </script> 
    </div> 
    </div> 
    <div id="4th Floor" class="w3-container city" style="display:none"> 
    <div class="container 75%"> 
     <div class="w3-content w3-display-container"> <a class="w3-btn-floating w3-display-left" onclick="plusDivs4thfloor(-1)">&#10094;</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">&#10095;</a> 
     <div class="w3-display-container 4thfloor"> <img src="images/32C/32CFloorplan.jpg" style="width:100%"> 
      <div class="w3-display-bottommiddle w3-large w3-container w3-padding-16"> Floor Plan </div> 
     </div> 
     <div class="w3-display-container 4thfloor"> <img src="images/32C/Kitchen1.jpg" style="width:100%"> 
      <div class="w3-display-bottommiddle w3-large w3-container w3-`padding-16"> Kitchen </div> 
     </div> 
     </div> 
     <script> 
    var slideIndex4thfloor = 1; 
    showDivs4thfloor(slideIndex4thfloor); 

    function plusDivs4thfloor(n) { 
     showDivs4thfloor(slideIndex4thfloor += n); 
    } 

    function showDivs4thfloor(n) { 
     var i; 
     var x = document.getElementsByClassName("4thfloor"); 
     if (n > x.length) {slideIndex4thfloor = 1}  
     if (n < 1) {slideIndex4thfloor = x.length} 
     for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
     } 
     x[slideIndex4thfloor-1].style.display = "block"; 
    } 
    </script> 
    </div> 
    </div> 

をだから、基本的にあなたのサイトのために私はあなたが好きで、「3rdfloor」または「4thfloor」を持ってどこに置き換えると、それが動作するはずです：私はあなたが下記を参照してください

下のスニペットでこれを見ることができると思います。

希望すると便利です。

乾杯、GC