javascript slider error while using multiple slides in html

javascript slider error while using multiple slides in html - javascript

i have a javascript slider in my html website, the code is like below:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000);
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg">
</div>
</div>
this is working fine, now i have added another slider in the same page:
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg">
</div>
</div>
now the issue is its kind of colliding, i think because both has same javascript code, both the slide is calculating total images in both the slides and blank images are coming in both, can anyone please tell me how to fix this, thanks in advance

First: You call the function showSlides() with a param (slideIndex) that isn't necessary, because the function uses the global declared var.
I recommend, to add or remove a class (for example .active) instead of styling with js. The advantage is, that you can get the index in the function via that class instead of using the global var for that:
const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
With that in use you can loop through the slideshow-containers without getting trouble with the slideIndex.
Working example:
(i removed the functions plusSlides() and currentSlide(), because they aren't used in that example and at least plusSlides() needs another functionality than showSlides())
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg" alt="Image 4">
</div>
</div>
Example with more sliders and slides:
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 1</div>
<img src="test1.jpg" alt="Image 0">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 3</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 3</div>
<img src="auto2.jpg" alt="Image 4">
</div>
<div class="mySlides fades">
<div class="numbertext">3 / 3</div>
<img src="auto3.jpg" alt="Image 5">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 4</div>
<img src="house1.jpg" alt="Image 6">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 4</div>
<img src="house2.jpg" alt="Image 7">
</div>
<div class="mySlides fades active">
<div class="numbertext">3 / 4</div>
<img src="house3.jpg" alt="Image 8">
</div>
<div class="mySlides fades">
<div class="numbertext">4 / 4</div>
<img src="house4.jpg" alt="Image 9">
</div>
</div>

Related

How to select diferent modals with one function?

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";
}

Add more than one slideshow gallery on one page

I have used the following code from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp to create this slideshow gallery.
But I have a problem with having more than one slideshow on one page, and therefore would ask if any of you had an idea to write a script for this?
HTML:
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(6)">
</div>
</div>
JS:
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");
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;
}
enter code here

One thing to notice is that the complete slideshow - caption, thumbnails (=demos), prev/next buttons and the actual current slide are all within the element with class container.
We can therefore consider an element with class container to be a whole slide show.
Just copy the whole container element and we have two slide shows in HTML.
Some things need changing. In the JS we pick up each of the container elements and remember their slideIndex in the actual element as a data attribute.
In the plusSlides and currentSlide functions we work out which slide show we are on from the event's target (and its parent(s)).
Also, the caption is defined with an id in the original, we change that to a class so that there can be one for each slide show.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_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 class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_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 class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
const slideShows = document.querySelectorAll('.container');
let slideShow, slideIndex; //will be set to the current slideShow as appropriate
for (let i=0; i < slideShows.length; i++) {
slideShow = slideShows[i];
slideShow.setAttribute('data-slideIndex', 1); //instead of slideIndex = 1 we remember the index for each slideshow in a data attribute
slideIndex = 1;
showSlides(1);
}
function plusSlides(n) {
slideShow = event.target.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex += n);
}
function currentSlide(n) {
slideShow = event.target.parentElement.parentElement.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = slideShow.getElementsByClassName("mySlides");
var dots = slideShow.getElementsByClassName("demo");
var captionText = slideShow.querySelector(".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;
slideShow.setAttribute('data-slideIndex', slideIndex); // remember the slideIndex for this slideShow
}
</script>
</body>
</html>
Note: there are various bits of JS in the w3Schools example that look a bit 'old-fashioned' nowadays, but the code works.

How to run img slider without stopping?

I want to make a img slider but it stops after it reaches the end. Why does it stop once it goes around?
When I run this code, the sequence is 1-2-3-4-5-6-1:
if ((n+1) > size) {
n = 0;
}
As you see that, I changed the high number to zero. Then the n become 0. So I thought the n start to increase until 5 again.
My code:
var n = 0;
var sec = 1000;
setInterval(function() {
n++;
showSlides(n);
}, sec);
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var size = slides.length;
if ((n + 1) > size) {
n = 0;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<script defer src="main.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425456/ltekybkstiyl7faumrsq/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425435/hwxwxqxfwo4htfgqksbu/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425448/rnelglmoujifzlbzykxw/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/coct9kmra7uhmeu4cxto/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425440/xacfj7abitmifeyciiia/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/cqxjhpdmepxto0nudsok/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
</div>
</body>
</html>

Let's see what's happening here :-
You have a global variable n which you also pass as a parameter to showSlides which makes a local copy of it inside showSlides so updating it won't actually change the global n.
Either you don't pass n at all to showSlides so that what you update inside the function ends up to be global n or you perform the check to reset n inside the setInterval before passing it to showSlides.

since n is passed in to showSlides function as parameter, you have to check the n value before passing it in.
var n = 0;
var sec = 1000;
setInterval(function() {
var slides = document.getElementsByClassName("mySlides");
var size = slides.length;
n = n + 1 === size ? 0 : n +1;
showSlides(n);
}, sec);
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var size = slides.length;
for (i = 0; i < size; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<script defer src="main.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425456/ltekybkstiyl7faumrsq/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425435/hwxwxqxfwo4htfgqksbu/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425448/rnelglmoujifzlbzykxw/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/coct9kmra7uhmeu4cxto/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425440/xacfj7abitmifeyciiia/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/cqxjhpdmepxto0nudsok/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
</div>
</body>
</html>

What does this error "Uncaught TypeError: Cannot read property 'style' of undefined" means?

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>

Manual slideshow not working as intended

I am working on revamping a webpage for a local montessori. I am attempting to use the manual slideshow script, however, the page is not working as intended. Without adding an "onload" attribute, every image in the slideshow is displayed at once. Upon inspection, I have an error stating: "Uncaught TypeError: Cannot read property 'style' of undefined". Here is the HTML section in question:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 8</div>
<img src="http://i.imgur.com/hOlkQyd.jpg" width = "800" height = "600"/>
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 8</div>
<img src="http://i.imgur.com/79juKeU.jpg" width = "800" height = "600"/>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 8</div>
<img src="http://i.imgur.com/54B3yvz.jpg" width = "800" height = "600"/>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 8</div>
<img src="http://i.imgur.com/zsvuaoU.jpg" width = "800" height = "600"/>
<div class="text">Caption Four</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 8</div>
<img src="http://i.imgur.com/N2hgBtH.jpg" width = "800" height = "600"/>
<div class="text">Caption Five</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 8</div>
<img src="http://i.imgur.com/McQHME4.jpg" width = "800" height = "600"/>
<div class="text">Caption Six</div>
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 8</div>
<img src="http://i.imgur.com/rOvbBlj.jpg" width = "800" height = "600"/>
<div class="text">Caption Seven</div>
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 8</div>
<img src="http://i.imgur.com/aX4kzGr.jpg" width = "800" height = "600"/>
<div class="text">Caption Eight</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot active" 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>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
</div>
Here is the script:
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"; /*Error appears here */
dots[slideIndex-1].className += " active";
}
What have I done wrong?

slides[slideIndex-1].style.display = "block"; /*Error appears here */
The reason why slides[slideIndex-1] would be undefined is if slideIndex - 1 is beyond the bounds of slides. The most likely cause is that slides is empty. This could occur if you're running your script before the page content instead of after. This would cause this line to make slides length zero, since there are not yet any elements with the class name mySlides:
var slides = document.getElementsByClassName("mySlides");
Moving your script tag after the slide content should resolve the issue, or moving the showSlides(slideIndex) call in an onload handler.

We Keep Coding

JavaScript is the programming language of the Web.

javascript slider error while using multiple slides in html - javascript

Related

How to select diferent modals with one function?

Add more than one slideshow gallery on one page

How to run img slider without stopping?

What does this error "Uncaught TypeError: Cannot read property 'style' of undefined" means?

Manual slideshow not working as intended

Categories

Resources