Issue with multiple slideshows using W3.CSS
Question
I am trying to create a portfolio website and I want to use modals to display projects. I am using the W3.CSS framework.
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.
Help please!
This is my 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:
.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:
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");
}
1 answers
solution1
0 2017-02-18 00:11:50
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.
For example, in my code, I added "3rdfloor" for my first slideshow and then "4thfloor" for the next. 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)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs3rdfloor(+1)">❯</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)">❮</a> <a class="w3-btn-floating w3-display-right" onclick="plusDivs4thfloor(+1)">❯</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.
Hope this helps!
Cheers, GC
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
W3.CSS and Javascript navigation bar Issue
Search/Filter multiple table on all columns using W3.CSS Javascript
How To show a modal dialog in angular, using w3.css as framework?
W3.CSS Navigation Tabs - Show 2 id
auto open modal with w3.css
Disable W3.CSS Hover Dropdown
w3.css topnav on small screen
How to centre a <div> within several other <div>s (using a mixture of w3.css and css)
Issue with multiple automatic slideshows on javascript
using w3.css my accordion works, but text doesn't wrap
Related Tags