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>
Related
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>
I have this website: https://acanhs.org I want the slide show at the beginning to be at full width on all devices. What can I add to make that happen?
My html:
<div class="w3-content w3-section responsive">
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/81463156_472179973704673_8295529433598935850_n(1).jpg')" >
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/097f1e08-ebfe-434a-bc68-8020d02cee6e.JPG')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/8291878a-b5ad-4003-8cc6-de7baafd84a0.JPG')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/27890996_211176766129569_6923967286697000960_n.jpg')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/42914143_364663130939605_1259772328364992140_n.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/42947322_373232869884042_7326776160519321694_n.jpg')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/44689929_944494762409958_8911408401400786089_n.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/fd2b6c09-19b7-42ad-b7fb-bce6dc983690.JPG')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/IMG_6922.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/IMG_6932.jpg')" >
</div>
</div>
My javascript:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
I have tried a lot of stuff but I'm new to web development so it's most likely a mistake on my end.
You need to add this css to your element: <div class="w3-content w3-section responsive">
margin-left: 0px;
margin-right: 0px;
width: 100%;
max-width: unset;
This is to get rid of the left and right margin, then to make the div full-width. As for the max-width, I saw that you had it set on 980px, so you need to set it on unset.
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>
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>
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.