We Keep Coding

Cannot see the image slider in HTML

I am trying to add an image slider to my personal web page (through GitHub). I am having some issues so I am not able to see the images. However, I can load images without using the slider and I can see them, so the issue is on the slider, I guess.
Here is the HTML and the JS:
<section id="GallerySlider">
<!-- Slideshow container -->
<div class="slideshow-container" style="margin-top: 1%;">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="/Images/newyork_night.jpg" style="width:600px; height:1000px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="/Images/Atrapasuenyos.jpg" style="width:600px; height:1000px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/Images/Burton.jpg" style="width:600px; height:1000px;">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<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";
}
</script>
</section>
Here what I see now:

I think problem is your src attribute of img tag.
you need to check "console tag" of browser.
If your "Images" folder is same level of your html page
you can set the src location like this
It maybe works well.

Following is the code that you can have:
<!--Slideshow Code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2 class="select-none font-black">Highlights</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="Christmas.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="agro chemicals.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="cleaning products by latan.png" alt="New York" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="textilesproducts by latan.png" alt="india" style="width:100%;">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

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

Modal Gallery - next and previous button to this script?

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>

Loading different content to modal box with one JavaScript file

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!

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.