简体   繁体   English

使用W3.CSS的多个幻灯片问题

[英]Issue with multiple slideshows using W3.CSS

I am trying to create a portfolio website and I want to use modals to display projects. 我正在尝试创建一个投资组合网站,我想使用模式来显示项目。 I am using the W3.CSS framework. 我正在使用W3.CSS框架。

My problem is that not all slideshows work, just the first one. 我的问题是,并非所有幻灯片都可以播放,只是第一个。 The other ones are not displayed properly and all I can see is the navigation arrows. 其他的未正确显示,我只能看到导航箭头。 I am guessing I need to make my Javascript function reset for every modal, but I have tried different things for what I understand of Javascript and it does not work. 我猜想我需要为每个模式重置Javascript函数,但是对于我对Javascript的了解,我尝试了不同的尝试,但它不起作用。

Help please! 请帮助!

This is my HTML: 这是我的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>

This is the CSS: 这是CSS:

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

And this is the Javascript: 这是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");
}

I had the exact same problem today and finally solved it. 我今天遇到了完全相同的问题,终于解决了。

What you need to do is add a name to the end of your classes and functions so the javascript can differentiate between each of the different slideshows. 您需要做的是在类和函数的末尾添加一个名称,以便javascript可以区分每个不同的幻灯片。

For example, in my code, I added "3rdfloor" for my first slideshow and then "4thfloor" for the next. 例如,在我的代码中,我为第一个幻灯片添加了“ 3rdfloor”,然后为下一个幻灯片添加了“ 4thfloor”。 I hope you can see this in the snippet below 我希望您可以在下面的代码段中看到

See Below: 见下文:

    <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>

So basically for your site replace wherever I have "3rdfloor" or "4thfloor" with whatever you want and it should work. 因此,基本上,对于您的网站,无论您有任何“ 3rdfloor”或“ 4thfloor”的地方,都可以将其替换为您想要的,并且应该可以使用。

Hope this helps! 希望这可以帮助!

Cheers, GC 干杯,GC

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM