Develop Reference

Debugging javascript slideshow

I'm struggling with debugging this slideshow. I have understood everything except this part:
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';
This is the last part of the javascript code. Please, can anyone explain this to me line by line. I have tried to use the debugger and I didn't understand how does it work.
Here is the whole code:
HTML:
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</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>
CSS:
* { box-sizing:border-box }
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
JavaScript:
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';
}
By the way, I have found this on w3schools.com I'm struggling with the last part as I said I don't know:
Why they replace "active" with ""?
Why they used this += sign what does it do in this case?
please try to make it simple as simple as possible and thaaaaank youuuuu in advance :)

The first for loop hides all of the slides, by setting the CSS display property to "none". The second 'for' loop makes the "current" slide button look inactive.
The second to last line of code makes the previous slide (slides[slideIndex-1]) visible. The last line makes the button for the previous slide look active.

previous button is not working in my slideshow code

I am creating slideshow code by mixing two codes of w3school example, all other things like next button are working fine. Only previous button (for loading previous image) is not working. I am debugging the JavaScript but not able to find or rectify the bug.
SlideShow ScreenShot
/slideshow.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="slideshow_style.css">
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container" onmouseover="stop_timeout()" onmouseout="start_timeout()">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Four</div>
</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(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="slideshow_script.js"></script>
</body>
</html>
/slideshow_script.js
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(myTime);
if(n===1){showSlides(slideIndex += (n-1));}
if(n===-1){showSlides(slideIndex += n);}
clearTimeout(myTime);
}
function currentSlide(n) {
clearTimeout(myTime);
showSlides(slideIndex = n);
}
function showSlides(num) {
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}
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 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";
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function start_timeout() {
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function stop_timeout() {
clearTimeout(myTime);
}
/slideshow_style.css
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
I know this is stupid question, but i am stuck. Please help me out, how can i make this code working. Please point out the bug. Thanks in advance.

Try replacing the line
if(n===-1){showSlides(slideIndex += n);}
with
if(n===-1){showSlides(slideIndex += (n-1));}
Also, just before the two lines
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 1}
add the following line:
if (slideIndex < 1) {slideIndex = slides.length; }
Also delete or comment out the two lines beginning if (num ...).
To be honest, there are aspects of your code that are confusing and are not helping you. It seems to me as if you haven't fully understood the code you have written and have just put things in because they seem to make it work.
Once you've got your code working, there's plenty of scope for writing it better. Take a look at https://codereview.stackexchange.com/.

Carousel disappears using custom HTML on Joomla

My Carousel images are disappearing on Joomla. I'm trying to have an automatic banner for a webpage using the below code from W3 Schools, I have entered the code into a custom module in Joomla. I have also tried using it with Notepad++ and opening it in a browser and it works completely fine. However, on the Joomla page the images become white and do not display. I am able to switch between them an the CSS for the slider and arrows seems to work. Please find my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/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="https://www.w3schools.com/howto/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="https://www.w3schools.com/howto/img_mountains_wide.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>
<script>
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, 6000); // Change image every 6 seconds
}
</script>
</body>
</html>

If you are using Custom HTML Module - it disables all of your scripts
I advice you to use something else for using JS in module - for example - Flexi Custom Code

The code you have shown is for an entire html document, you can't simply dump that whole into another entire html document. Joomla is a CMS, you shouldn't just drop html into it. To add an image carousel it would be better to create your own module to do that.

how can i remove my slideshow width? and how can i add more number of picture in my slideshow

how can i remove my slideshow width? and how can i add more number of picture in my slideshow
i want to increase my slideshow width, and increase number of picture of myslideshow, slideshow is writtern in java, css and html.
my pics size is 1200x300.
i tried to add width in css but width increased just right side, my pic does not fit in center please help me experts.
Help Help Help
Help Help Help
Help Help Help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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>
</body>
</html>

Simply remove the margin in the body and add the min-width: 100%; to the .slideshow-container.
For adding more slide just duplicate this code.
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="my-image.jpg"> <!-- remove the width property from all image tag. -->
<div class="text"></div>
</div>
There is no magical width property that will set the image width to 100% you need to set the width of the container of the image and the image will expand accordingly.
Also, increase the number of <span class="dot"></span> element as you increase the slides. Because it depends on the number of slides else it will stop the js code and throw an error.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0px;
}
.widget {
margin: 0px;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
min-width: 100%;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/food-q-c-1200-300-3.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/animals-q-c-1200-300-5.jpg" style="width: 100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<!-- Increase the dots as you increase the slides -->
</div>
<script>
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>
</body>
</html>

Is this what you want?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
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>
</body>
</html>

Javascript and CSS for Automatic Slideshow

I would like to know how to make this slider to automatic slideshow.
This slider contains clickable bullets at the bottom and pre/next buttons on the slides but doesn't animate itself.
Would anyone please let me know how to make it automatic slideshow?
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
Thank you in advance.

Use setInterval() function to make the slideshow automatically for the certain time interval.
Add the setInterval() function in your example reference link after the below line:
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 1000);
The slide will be changed every 1000 milli seconds. If you need you can adjust the time as per your need.

You could do what the click on the next button does: call plusSlider with a parameter 1.
To do that every 2000ms your can use setInterval. On that w3schools tryit page put following code before the closing </script> then run it:
setInterval(plusSlides,2000,1);

What I would recommend is making use of a setInterval() function such as the following:
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
The above function increases the current index, then triggers the showSlides() function, passing the index as a parameter. The 3000 denotes the speed at which the automation should occur, with the time specified in millseconds. Note that setInterval() should be used rather than setTimeout(), because setInteravl() fires more than once.
This gives the following result:
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";
}
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/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="https://www.w3schools.com/howto/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="https://www.w3schools.com/howto/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>
</body>
</html>
Hope this helps! :)