I'm trying to implement a image gallery taken from w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery).
However, when I try to link the javascript externally, the first image won't show up. I'm not good at javascript so I'm having trouble fixing it. Here is my code in external file.
document.addEventListener("DOMContentLoaded", function() {
showSlides(slideIndex);
});
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("g-image-wrapper");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
</div>
</div>
Related
i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.
Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?
I omitted from code lower the styling and tons of other content to make it shorter but i didn't do any changes in the original script from W3 except of adding new line of "myModal1" to functions open/closeModal which is the problem i try to solve.
Thank you very much in advance for your answers. :)
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>
Will reply according to your code
You have
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
this will open both of the modals together
There are numerous ways to implement this function
A very very basic one : You could add an argument and use an if else-if statement inside the script to specify which one to open
Example :
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal1");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal(id) {
if(id=="myModal")
document.getElementById("myModal").style.display = "block";
else if(id=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>
as you could see the changes:
in the body section:
onclick="openModal("myModal");currentSlide(1)" //first h2 div
onclick="openModal("myModal1");currentSlide(1)" //second h2 div
script section:
function openModal(modal) {
if(modal=="myModal")
document.getElementById("myModal").style.display = "block";
else if(modal=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
I have this code, I need to input next and previous buttons or link into modal image, when I want to change photo (not in preview but in modal). For me is not a problem to input them into HTML script, but the problem is I can't so much JS so I am not able to create a script that can move an image from one to another infinitely in loop when clicked next/previous button. I accept code written in the newest JQuery(mobile) cause I use it too on my page. Many thanks for the help. Here is the link as it works now
https://jsfiddle.net/8ryutc5g/2/
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec3.jpg" style="height:300px; width:100%;">
<div class="text">Dělník</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec.jpg" style="height:300px; width:100%;">
<div class="text">Montér</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/svarec2.jpg" style="height:300px; width:100%;">
<div class="text">Uklízečka</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/zamecnik.jpg" style="height:300px; width:100%;">
<div class="text">kuchař</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img class="ImgThumbnail" src="http://srovnej.jednoduse.cz/img/zamecnik2.jpg" style="height:300px; width:100%;">
<div class="text">Striptérka</div>
</div>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" style="max-height:800px; max-width:100%">
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
I just changed img files but it had this message "Uncaught TypeError: Cannot read property 'style' of undefined". What was wrong with my code?
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="COLOURBOX1.jpg" style="width:100%">
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="COLOURBOX10.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="COLOURBOX2.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
var slideIndex = 0;
showSlides();
This is JS below. And "slides[slideIndex-1].style.display = "block"; " this part has a error message I mentioned.
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
It seems your code is running before the DOM is fully loaded. You can either place your code at the bottom of the body tag or wrap your code with DOMContentLoaded:
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
});
</script>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="COLOURBOX1.jpg" style="width:100%">
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="COLOURBOX10.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="COLOURBOX2.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
I am trying to use one javascript file to open a modal box with different content depending on what is clicked. One modal box works great, the other ones load the correct text, but not any pictures. If I take out the div class mySlides fade and just add pictures to the modal box, it works fine. I am sure it something simple I am overlooking.
// Get the modal
let modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
let btn = document.getElementsByClassName('text');
// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");
// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal[i].style.display = "flex";
}
}
for (let i = 0; i < span.length; i++) {
span[i].onclick = function() {
modal[i].style.display = "none";
}
}
let slideIndex = 1;
// Next/previous controls
function plusSlides(n) {
showSlide(slideIndex = n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
showSlide(slideIndex);
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/checkbook.jpg" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(1)"></span>
<span class="dot" onClick="currentSlide(2)"></span>
<span class="dot" onClick="currentSlide(3)"></span>
</div>
<h2 id="modal-heading">MyRegister App</h2>
<p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
<div class="photo-wrap">
<img src="images/test.jpg" class="portp">
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/test.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(1)"></span>
<span class="dot" onClick="currentSlide(2)"></span>
<span class="dot" onClick="currentSlide(3)"></span>
</div>
<h2 id="modal-heading">Practice Test App</h2>
<p id="modal-text">This is a practice test application I made for work.</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
As there is no picture attached. I can't see is the picture is changing or not.
After reading your code, I understand that you are changing your slides from this html code.
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
But in your code, you are not adding the value that you are sending to plusSlides() function.
So, you need to make changes to your plusSlides() function like the following:
function plusSlides(n) {
showSlide(slideIndex += n);
}
That's it! Your problem is solved!!!
BUT
There's Still Some Problem Exist!
You may notice that you're back button is not working as expected. That's because you have total 6 div elements with same class name! so, here, slides.length actually returns 6. So, you may pass another indicator to your function from your html. And you should put separate slideIndex variable for keeping count of each event.
I have tried to edit your javascript.
Here is the full live code:
// Get the modal
let modal = document.getElementsByClassName('modal');
// Get the button that opens the modal
let btn = document.getElementsByClassName('text');
// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");
// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal[i].style.display = "flex";
}
}
for (let i = 0; i < span.length; i++) {
span[i].onclick = function() {
modal[i].style.display = "none";
}
}
let slideIndex = [1, 4];
let slides = document.getElementsByClassName("mySlides"),
dots = document.getElementsByClassName("dot");
// Next/previous controls
function plusSlides(counter, index) {
showSlide((slideIndex[index] + counter), index);
}
// Thumbnail image controls
function currentSlide(position, index) {
showSlide(position, index);
}
function showSlide(position, index) {
let lastPostion = index * 3 + 3,
firstPosition = index * 3 + 1;
if (position > lastPostion) {
position = firstPosition;
}
if (position < firstPosition) {
position = lastPostion;
}
slides[slideIndex[index] - 1].style.display = "none";
dots[slideIndex[index] - 1].className = dots[slideIndex[index] - 1].className.replace(" active", "");
slides[position - 1].style.display = "block";
dots[position - 1].className += " active";
slideIndex[index] = position;
}
function initSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (var i = 0; i < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[0].style.display = "block";
dots[0].className += " active";
slides[3].style.display = "block";
dots[3].className += " active";
}
initSlide();
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/checkbook.jpg" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1, 0)">❮</a>
<a class="next" onClick="plusSlides(1, 0)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(1, 0)"></span>
<span class="dot" onClick="currentSlide(2, 0)"></span>
<span class="dot" onClick="currentSlide(3, 0)"></span>
</div>
<h2 id="modal-heading">MyRegister App</h2>
<p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
<div class="photo-wrap">
<img src="images/test.jpg" class="portp">
<button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="slideshow-container">
<!--Full-width images with number and caption text-->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/test.jpg" class="modal-image" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/practest.png" class="modal-image" style="width:100%">
</div>
<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1, 1)">❮</a>
<a class="next" onClick="plusSlides(1, 1)">❯</a>
</div>
<br>
<!--The dots/circles-->
<div style="text-align: center">
<span class="dot" onClick="currentSlide(4, 1)"></span>
<span class="dot" onClick="currentSlide(5, 1)"></span>
<span class="dot" onClick="currentSlide(6, 1)"></span>
</div>
<h2 id="modal-heading">Practice Test App</h2>
<p id="modal-text">This is a practice test application I made for work.</p>
<span class="close">×</span>
Source Code
</div>
</div>
</div>
Hope, this will help your!
Could you please help to use multiple slideshow based on the code below. It works fine if only one slideshow is on the page, in other case I have to copy the code multiple times and give different IDs to the elements. Is there any solution to solve this without copy the code?
Here is the code from w3schools:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
If you want to use the same code with multiple slideshows you can add parameters to the showSlides function
var slideIndex = 1;
showSlides(slideIndex,"mySlides","dots");
function plusSlides(n,nSliders,nDots) {
showSlides(slideIndex += n,nSliders,nDots);
}
function currentSlide(n,nSliders,nDots) {
showSlides(slideIndex = n,nSliders,nDots);
}
function showSlides(n,nSliders,nDots) {
var i;
var slides = document.getElementsByClassName(String(nSliders));
var dots = document.getElementsByClassName(nDots);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Like this you have to change only in html files the arguments of the function
html:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1,'mySlides','dots')">❮</a>
<a class="next" onclick="plusSlides(1,'mySlides','dots')">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1,'mySlides','dots')"></span>
<span class="dot" onclick="currentSlide(2,'mySlides','dots')"></span>
<span class="dot" onclick="currentSlide(3,'mySlides','dots')"></span>
</div>