Jump to content

witt

Members
  • Content Count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About witt

  • Rank
    Newbie
  1. witt

    W3.CSS and w3.includeHTML();

    Thank you - that solved the problem. It works now 🙂
  2. witt

    W3.CSS and w3.includeHTML();

    Hello dsonesuk, thank you for your quick reply. Your hint sounds logical to me and so I 've tried to change the order of the scripts (I even had the carousel script in the header.html), but none auf my attempts made the header slideshow visible. Where would you put the script or what would be your order?
  3. witt

    W3.CSS and w3.includeHTML();

    Hello, I am working on a webpage. I want to include some parts like the automatic slidesshow in the header or the footer. This ist the code of the page I am working on: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title</title> <link href="images/favicon.ico" rel="shortcut icon"> <link rel="stylesheet" href="css/w3.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/w3-theme-xxx.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> .mySlides {display:none;} </style> </head> <body class="w3-content" style="max-width:1260px"> <!-- Sidebar/menu --> <nav class="w3-sidebar w3-bar-block w3-collapse w3-top w3-animate-bottom w3-theme-l4 w3-card" style="z-index:3;width:240px; padding-top:25px;" id="mySidebar"> <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Menü schließen <i class="fa fa-remove"></i></a> <a class="w3-bar-item w3-button w3-text-theme" href="index.html">Start</a> <a class="w3-bar-item w3-button" href="produkte.html">Produkte</a> <a class="w3-bar-item w3-button" href="kontakt.html">Kontakt</a> <a class="w3-bar-item w3-button" href="jobs.html">Jobangebote</a> <a class="w3-bar-item w3-button" href="filme.html">Filme</a> <a class="w3-bar-item w3-button" href="login.html">Login</a> <a class="w3-bar-item w3-button" href="impressum.html">Impressum + Datenschutz</a> </nav> <!-- Top menu on small screens --> <header class="w3-bar w3-top w3-hide-large w3-blue w3-large"> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-left" onclick="w3_open()"><i class="fa fa-bars"></i></a> </header> <!-- Overlay effect when opening sidebar on small screens --> <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> <!-- !PAGE CONTENT! --> <div class="w3-main w3-card-2" style="margin-left:300px;background: none repeat scroll 0% 0% #FFF;"> <!-- Push down content on small screens --> <div class="w3-hide-large" style="margin-top:43px"></div> <header class="w3-container w3-hide-small" style="padding-top:9px;"> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Text</b></h1> <h2>Text</h2> <p>more Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/auswertung1h.jpg" alt="" style="width:100%"> </div> </div> </div> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Text</b></h1> <h2>Text</h2> <p>more Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/auswertung2h.jpg" alt="" style="width:100%"> </div> </div> </div> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Text</b></h1> <h2>Text</h2> <p>Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/gebr.gussasphalt-kocher-auf-sattelauflieger-01h.jpg" alt="" style="width:100%"> </div> </div> </div> </header> <header class="w3-container w3-hide-large w3-hide-medium" style="padding-top:20px;"> <img class="w3-image" src="images/logo.jpg" alt="logo" /> </header> <div class="w3-container" style="padding:32px;"> <h1 class="w3-text-blue">Text</h1> <hr class="blue"> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id01').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id01" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-02.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-03.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 3/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-04.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 4/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-05.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 5/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-06.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 6/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-07.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 7/7</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,0)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,0)">❯</button> </div> </div> </div> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id02').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id02" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides2 w3-animate-opacity"> <img src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/2</div> </div> <div class="w3-display-container mySlides2 w3-animate-opacity"> <img src="img/schweissbahnverlegegeraet_mit_andrueckrolle-2.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/2</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,1)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,1)">❯</button> </div> </div> </div> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id03').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id03" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id03').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides3 w3-animate-opacity"> <img src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/1</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,2)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,2)">❯</button> </div> </div> </div> </div> <footer class="w3-container w3-card-4 w3-blue"> <p class="w3-center"><i class="fa fa-copyright"></i> Company 2018</p> </footer> </div> <script> // Open and close the sidebar on medium and small screens function w3_open() { document.getElementById("mySidebar").style.display = "block"; } function w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showDivs(1, 0); showDivs(1, 1); showDivs(1, 2); function plusDivs(n, no) { showDivs(slideIndex[no] += n, no); } function showDivs(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> <script> var slideIndex1 = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndex1++; if (slideIndex1 > x.length) {slideIndex1 = 1} x[slideIndex1-1].style.display = "block"; setTimeout(carousel, 5000); } </script> </body> </html> So I have excluded the header section and named and saved it header.html <header class="w3-container" style="padding-top:9px;"> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Company</b></h1> <h2>New</h2> <p>Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/auswertung1h.jpg" alt="" style="width:100%"> </div> </div> </div> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Company</b></h1> <h2>New</h2> <p>Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/auswertung2h.jpg" alt="" style="width:100%"> </div> </div> </div> <div class="mySlides w3-card-4 w3-panel"> <div class="w3-row-paading"> <div class="w3-panel w3-half"> <h1><b>Company</b></h1> <h2>Text</h2> <p>more Text</p> </div> <div class="w3-panel w3-half"> <img class="w3-card-4" src="img/gebr.gussasphalt-kocher-auf-sattelauflieger-01h.jpg" alt="" style="width:100%"> </div> </div> </div> </header> And changed the code of the page into: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title</title> <link href="images/favicon.ico" rel="shortcut icon"> <link rel="stylesheet" href="css/w3.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/w3-theme-xxx.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> .mySlides {display:none;} </style> <script src="js/w3.js"></script> </head> <body class="w3-content" style="max-width:1260px"> <!-- Sidebar/menu --> <nav class="w3-sidebar w3-bar-block w3-collapse w3-top w3-animate-bottom w3-theme-l4 w3-card" style="z-index:3;width:240px; padding-top:25px;" id="mySidebar"> <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Menü schließen <i class="fa fa-remove"></i></a> <a class="w3-bar-item w3-button w3-text-theme" href="index.html">Start</a> <a class="w3-bar-item w3-button" href="produkte.html">Produkte</a> <a class="w3-bar-item w3-button" href="kontakt.html">Kontakt</a> <a class="w3-bar-item w3-button" href="jobs.html">Jobangebote</a> <a class="w3-bar-item w3-button" href="filme.html">Filme</a> <a class="w3-bar-item w3-button" href="login.html">Login</a> <a class="w3-bar-item w3-button" href="impressum.html">Impressum + Datenschutz</a> </nav> <!-- Top menu on small screens --> <header class="w3-bar w3-top w3-hide-large w3-blue w3-large"> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-left" onclick="w3_open()"><i class="fa fa-bars"></i></a> </header> <!-- Overlay effect when opening sidebar on small screens --> <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> <!-- !PAGE CONTENT! --> <div class="w3-main w3-card-2" style="margin-left:300px;background: none repeat scroll 0% 0% #FFF;"> <!-- Push down content on small screens --> <div class="w3-hide-large" style="margin-top:43px"></div> <div w3-include-html="header.html"></div> <header class="w3-container w3-hide-large w3-hide-medium" style="padding-top:20px;"> <img class="w3-image" src="images/logo.jpg" alt="logo" /> </header> <div class="w3-container" style="padding:32px;"> <h1 class="w3-text-blue">Text</h1> <hr class="blue"> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id01').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id01" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-01.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-02.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-03.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 3/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-04.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 4/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-05.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 5/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-06.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 6/7</div> </div> <div class="w3-display-container mySlides1 w3-animate-opacity"> <img src="img/svg_250_schweissbahnverlegemaschine-07.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 7/7</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,0)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,0)">❯</button> </div> </div> </div> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id02').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id02" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides2 w3-animate-opacity"> <img src="img/schweissbahnverlegegeraet_mit_andrueckrolle.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/2</div> </div> <div class="w3-display-container mySlides2 w3-animate-opacity"> <img src="img/schweissbahnverlegegeraet_mit_andrueckrolle-2.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 2/2</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,1)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,1)">❯</button> </div> </div> </div> <h2>Text</h2> <div class="w3-row-padding"> <div class="w3-container w3-half"> <img class="w3-image w3-card-4" src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="cursor:zoom-in" onclick="document.getElementById('id03').style.display='block'"> <p>Bitte auf das Bild klicken, um weitere Bilder zu sehen</p> </div> <div class="w3-container w3-half"> <ul> <li>blabla</li> </ul> </div> </div> <hr class="blue"> <div id="id03" class="w3-modal w3-animate-zoom"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id03').style.display='none'" class="w3-button w3-display-topright">×</span> <h2 class="w3-text-white">Text</h2> </header> <div class="w3-content w3-display-container"> <div class="w3-display-container mySlides3 w3-animate-opacity"> <img src="img/schweissbahn-verlegemaschine_svg_100.jpg" alt="" style="width:100%"> <div class="w3-display-bottomright w3-container w3-padding-8 w3-opacity w3-black">Bild 1/1</div> </div> <button class="w3-button w3-black w3-opacity w3-display-topleft" onclick="plusDivs(-1,2)">❮</button> <button class="w3-button w3-black w3-opacity w3-display-topright" onclick="plusDivs(1,2)">❯</button> </div> </div> </div> </div> <footer class="w3-container w3-card-4 w3-blue"> <p class="w3-center"><i class="fa fa-copyright"></i> Company 2018</p> </footer> </div> <script> // Open and close the sidebar on medium and small screens function w3_open() { document.getElementById("mySidebar").style.display = "block"; } function w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showDivs(1, 0); showDivs(1, 1); showDivs(1, 2); function plusDivs(n, no) { showDivs(slideIndex[no] += n, no); } function showDivs(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> <script> var slideIndex1 = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndex1++; if (slideIndex1 > x.length) {slideIndex1 = 1} x[slideIndex1-1].style.display = "block"; setTimeout(carousel, 5000); } </script> <script> w3.includeHTML(); </script> </body> </html> But it is not working as expected. The content of header..html is not visible. If I remove <style> .mySlides {display:none;} </style> from the head section, the 3 slides become visible (but not working as a slideshow). What needs to be done to make this work? Thanks for your attention
  4. Thank you very much - I 've spent hours and couldn' t find my mistake 🙂 My slideshows are OK now. And I have also found the solution for my question concerning the modal in this forum. http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/?tab=comments#comment-308210 You help me a lot. Thank you from Hamburg, Germany
  5. Hello, I have 2 questions. Question No. 1: I want more than two manual slidesshows on a webpage. The example on W3.CSS Slideshows for 2 slidesshows looks like this: <!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides1" src="img_snowtops.jpg" style="width:100%"> <img class="mySlides1" src="img_lights.jpg" style="width:100%"> <img class="mySlides1" src="img_mountains.jpg" style="width:100%"> <img class="mySlides1" src="img_forest.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">❯</button> </div> <div class="w3-content w3-display-container"> <img class="mySlides2" src="img_la.jpg" style="width:100%"> <img class="mySlides2" src="img_ny.jpg" style="width:100%"> <img class="mySlides2" src="img_chicago.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">❯</button> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2"] showDivs(1, 0); showDivs(1, 1); function plusDivs(n, no) { showDivs(slideIndex[no] += n, no); } function showDivs(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> I've tried it myself with 3 slidesshows, but my solution does not work. <!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides1" src="img_snowtops.jpg" style="width:100%"> <img class="mySlides1" src="img_lights.jpg" style="width:100%"> <img class="mySlides1" src="img_mountains.jpg" style="width:100%"> <img class="mySlides1" src="img_forest.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">❯</button> </div> <br> <div class="w3-content w3-display-container"> <img class="mySlides2" src="img_la.jpg" style="width:100%"> <img class="mySlides2" src="img_ny.jpg" style="width:100%"> <img class="mySlides2" src="img_chicago.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">❯</button> </div> <br> <div class="w3-content w3-display-container"> <img class="mySlides3" src="img_snowtops.jpg" style="width:100%"> <img class="mySlides3" src="img_lights.jpg" style="width:100%"> <img class="mySlides3" src="img_mountains.jp" style="width:100%"> <button class="w3-button w3-red w3-display-left" onclick="plusDivs(-1, 2)">❮</button> <button class="w3-button w3-red w3-display-right" onclick="plusDivs(1, 2)">❯</button> </div> <script> var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showDivs(1, 0); showDivs(1, 1); showDivs(1, 2); function plusDivs(n, no) { showDivs(slideIndex[no] += n, no); } function showDivs(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> What am I doing wrong? Questions No. 2: I have more than one w3.css modal on a webpage. How do I have to change the following code to work with more than one modal? <!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span> <h2>Modal Header</h2> </header> <div class="w3-container"> <p>You have two options to close this modal:</p> <p>Click on the "x" or click anywhere outside of the modal!</p> </div> <footer class="w3-container w3-teal"> <p>Modal Footer</p> </footer> </div> </div> </div> <script> // Get the modal var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html> Thank you for your attention.
×