We Keep Coding

javascript carousel not showing first slide - javascript

So i took this code off of w3schools to try and learn how to build a carousel from scratch and adapted IT to my own project but i've run into a problem where it won't show the first slide by default when the page loads. the carousel works fine otherwise once you click on the balls(dots?) meant to control it.
DEFAULT SLIDE NOT SHOWING
here is the html, css and javascript code..
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="/assets/imgs/fifa23.jpg" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/starocean23.webp" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/GOWcontroller.jpg" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/gothamKnights23.jpg" style="width:100%">
<div class="text">Releases on October 21st!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/plagueTale23.jpg" style="width:100%">
<div class="text">Releases on October 18th!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls" onclick="currentSlide(1)"></span>
<span class="balls" onclick="currentSlide(2)"></span>
<span class="balls" onclick="currentSlide(3)"></span>
<span class="balls" onclick="currentSlide(4)"></span>
<span class="balls" onclick="currentSlide(5)"></span>
</div>
Any help is greatly appreciated!
NOTE: i have a display: none; line in CSS meant to stop all the slides from showing up at once, if i remove it they stack up on the page so i don't think that's the problem.
Tried changing the loops to see if i had typed something wrong but it didn't work

If you are using an external JavaScript file then you can call the function by adding event listeners in the JavaScript file.
Otherwise, you need to create tag and write the whole javascript code. Then it will work.
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
[...balls].forEach((element, index) => {
element.addEventListener("click", () => currentSlide(index + 1))
})
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (let i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGljfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="https://i.pinimg.com/736x/f7/75/7d/f7757d5977c6ade5ba352ec583fe8e40.jpg" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls"></span>
<span class="balls"></span>
<span class="balls"></span>
</div>

Related

So basically, I'm trying to create multiple slideshows on the page with dots to switch between the slides (because I've already tried the arrow type button and it doesn't workout for me idk), and the issue is that when I use more than one slideshow the dots on the first one either stop working or begin switching the below slideshows slides.
I have already seen a lot of threads about this issue and tried several answers to them, but none of them seem to work. So if anybody has any clue of what is happening in my code and knows the answer, it would be great. PD: I'm sorry if it contains any grammatic faults :c.
This is the code I'm using (originally from w3s: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_quotes_slideshow and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple)
/* Referencia miscelánea de assets
color cuadraos: #31572C
color fondo global: #B3B882
color fondo variable: #90A970
color fondo recuadros: #4F772D
color fondo titulo principal&Home: #132A13
color flechas: #000000
*/
* {
font-family: 'Roboto', sans-serif;
font-size:large;
}
details {
border: 1px solid #d4d4d400;
margin-top: 10px;
}
summary {
font-weight: bold;
font-size: 120%;
margin: -.75em -.75em 0;
padding: .75em;
background-color:#31572C;
color: #fff;
}
details[open] {
padding: 10px;
}
details[open] summary {
margin-bottom: 10px;
}
#chingue {
text-align: center;
}
/* Cuadrados principales*/
.TituloEleccion {
color: #ffffff;
background-color: #31572C;
text-align: center;
height: 99%;
width:100%;
margin-top:0%;
line-height: 3.1;
}
body {
background-color: #B3B882;
}
#titulogeneral {
color: #ffffff;
background-color: #132A13;
border-style: ridge;
border-color: #4eaa4e;
margin-left: 20%;
margin-right: 20%;
height: 8.5%;
text-align: center;
line-height: 4.15;
white-space: nowrap;
overflow: hidden;
white-space: initial;
}
.colordesconocido {
background-color: #4F772D;
width:100%;
margin-top:0%;
margin-bottom: 30px;
}
#fondouniversal {
background-color:#B3B882 ;
}
.divinformacion {
width: 50%;
display: block;
float: left;
padding: 20px;
border: 2px solid rgb(0, 0, 0);
border-style: double;
border-radius: 10px;
}
.fondoeleccion {
color: #000000;
background-color: #4F772D;
width:100%;
margin-top:0%;
border: 1.5px solid rgb(0, 0, 0);
border-style: double;
margin-bottom: 30px;
}
img{
border:2px solid #000000;
}
body {
font-family:"Pathway Gothic One", sans-serif;
}
.hidecontent {
display: none;
}
#myaccordion label {
box-shadow:0 0 20px #d4d4d4;
display: block;
padding: 8px 22px;
margin: 1px 0px 1px 0px;
cursor: pointer;
background: #31572C;
color: #FFF;
transition: ease .5s;
text-align:center;
}
#myaccordion label:hover {
background: #31572C;
}
.content {
box-shadow:0 0 20px #d4d4d4;
background: #90A970;
padding: 1.5% 1.5%;
border: 1px solid #d4d4d4;
margin: -1 0 0 0;
}
#myaccordion input:checked + label + .content {
display: block;
-moz-animation: fadeIn 0.5s ease-out;
-o-animation: fadeIn 0.5s ease-out;
animation: fadeIn 0.5s ease-out;
}
#info1 {
float:right;
}
#foto {
float:left;
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container0 {
position: relative;
background:#90A970;
}
.slideshow-container1 {
position: relative;
background:#90A970;
}
.slideshow-container2 {
position: relative;
background:#90A970;
}
/* Slides */
.mySlides0 {
display: none;
padding: 2px;
text-align: center;
}
.mySlides1 {
display: none;
padding: 2px;
text-align: center;
}
.mySlides2 {
display: none;
padding: 2px;
text-align: center;
}
/* The dot/bullet/indicator container */
.dot-container0 {
text-align: center;
padding: 20px;
background:#31572C;
}
.dot-container1 {
text-align: center;
padding: 20px;
background:#31572C;
}
.dot-container2 {
text-align: center;
padding: 20px;
background:#31572C;
}
/* 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;
}
.dot0 {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot1 {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot2 {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
.titulilloparque {
text-align: center;
color:#000000;
}
<html>
<head>
<title>PARQUES NATURALES Y NACIONALES. ANDALUCIA</title>
<link rel="stylesheet" href="CSSMAIN.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<a id="inicio"></a>
<body id="fondouniversal">
<div>
<p><h1 id="titulogeneral">PARQUES NATURALES Y NACIONALES. ANDALUCIA</h1></p>
</div>
<div id="myaccordion">
<input type="checkbox" id="accordion1" class="hidecontent"/>
<label for="accordion1"><h2>PARQUES NATURALES</h2></label>
<div class="content hidecontent">
<div class="fondoeleccion">
<h3 class="titulilloparque">PARQUE NATURAL DE SIERRA NEVADA</h3>
<div class="slideshow-container0">
<div class="mySlides0 fade">
<img src="images/FotoSN1.jpg" style="width:65%" style="height:25%"/>
<div>Imagen del parque</div>
</div>
<div class="mySlides0">
<p> <h4>DATOS</h4>
GEOLOCALIZACIÓN: 37°05'19.8''N 3°10'18.7''O <br/>
Hotel, casa rural y cabaña.<br/>
Senderismo, alpinismo, rutas en bicicleta, esquí, snowboard,
clases de esquí y snowboard guiadas<br/>
Jabalí, gato montés, zorro, comadreja, garduña, gineta,
y el frecuente turón común <br/>
</p>
</div>
<div class="mySlides0">
<p> <h4>TURISMO</h4>
TOTAL<br/>
VIAJEROS 3712<br/>
PERNOCTACIONES 8430<br/>
EST. MEDIA 2,27 d<br/><br/>
ESPAÑOLES<br/>
VIAJEROS 2235<br/>
PERNOCTACIONES 5558<br/>
EST. MEDIA 2,49 d<br/><br/>
EXTRANJEROS<br/>
VIAJEROS 1477<br/>
PERNOCTACIONES 2872<br/>
EST. MEDIA 1,94 d<br/>
</p>
</div>
</div>
<div class="dot-container0">
<span class="dot0" onclick="moverprimero(1)"></span>
<span class="dot0" onclick="moverprimero(2)"></span>
<span class="dot0" onclick="moverprimero(3)"></span>
</div>
<script>
var slideIndex1 = 2;
showSlides(slideIndex1);
function plusSlides(n) {
showSlides(slideIndex1 += n);
}
function moverprimero(n) {
showSlides(slideIndex1 = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides0");
var dots = document.getElementsByClassName("dot0");
if (n > slides.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = 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[slideIndex1-1].style.display = "block";
dots[slideIndex1-1].className += " active";
}
</script>
🏚
</div>
<div class="fondoeleccion">
<h3 class="titulilloparque">PARQUE NATURAL SIERRA DE LAS NIEVES</h3>
<div class="slideshow-container1">
<div class="mySlides1 fade">
<img src="images/FOTOSdN1.jpg" style="width:65%" style="height:25%">
<div>Imagen del parque</div>
</div>
<div class="mySlides1">
<p> <h4>DATOS</h4>
GEOLOCALIZACIÓN: 36°44'N 4°59'O <br>
Hotel y casa rural.<br>
Rutas de senderismo, rutas en bicicleta,
rutas en 4x4 y observatorio de aves.<br>
Íbice ibérico, gato montés, zorro, comadreja,
garduña, gineta, turón común.<br>
</p>
</div>
<div class="mySlides1">
<p> <h4>TURISMO</h4>
TOTAL<br>
VIAJEROS 2928<br>
PERNOCTACIONES 5415<br>
EST. MEDIA 1'85 d<br><br>
ESPAÑOLES<br>
VIAJEROS 1245<br>
PERNOCTACIONES 2041<br>
EST. MEDIA 1'64 d<br><br>
EXTRANJEROS<br>
VIAJEROS 1683<br>
PERNOCTACIONES 3374<br>
EST. MEDIA 2 d<br>
</p>
</div>
</div>
<div class="dot-container1">
<span class="dot1" onclick="moversegundo(1)"></span>
<span class="dot1" onclick="moversegundo(2)"></span>
<span class="dot1" onclick="moversegundo(3)"></span>
</div>
<script>
var slideIndex2 = 1;
showSlides(slideIndex2);
function plusSlides(n) {
showSlides(slideIndex2 += n);
}
function moversegundo(n) {
showSlides(slideIndex2 = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("dot1");
if (n > slides.length) {slideIndex2 = 1}
if (n < 1) {slideIndex2 = 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[slideIndex2-1].style.display = "block";
dots[slideIndex2-1].className += " active";
}
</script>
🏚
</div>
<div class="fondoeleccion">
<h3 class="titulilloparque">PARQUE NATURAL DE LA BREÑA Y MARISMAS DE BARBATE</h3>
<div class="slideshow-container2">
<div class="mySlides2 fade">
<img src="images/FOTOBMB1.jpg" style="width:65%" style="height:25%">
<div>Imagen del parque</div>
</div>
<div class="mySlides2">
<p> <h4>DATOS</h4>
GEOLOCALIZACIÓN: 36°10'44''N 5°58'22''O <br>
Hotel y casa rural.<br>
Inmersión submarina, surf, observación de aves,
rutas de senderimos y la destaca visita al tajo vertical de
los Acantilados de Barbate.<br>
Principalmente fauna aviar; gaviota argéntea,
garcilla bueyera, garcetas, vencejo, mirlo, cárabo, carbonero, etc.<br>
</p>
</div>
<div class="mySlides2">
<p> <h4>TURISMO</h4>
TOTAL<br>
VIAJEROS 2188<br>
PERNOCTACIONES 7363<br>
EST. MEDIA 3,37 d<br><br>
ESPAÑOLES<br>
VIAJEROS 1417<br>
PERNOCTACIONES 3744<br>
EST. MEDIA 2,64 d<br><br>
EXTRANJEROS<br>
VIAJEROS 771<br>
PERNOCTACIONES 3619<br>
EST. MEDIA 4,69 d<br>
</p>
</div>
</div>
<div class="dot-container2">
<span class="dot2" onclick="movertercero(1)"></span>
<span class="dot2" onclick="movertercero(2)"></span>
<span class="dot2" onclick="movertercero(3)"></span>
</div>
<script>
var slideIndex3 = 1;
showSlides(slideIndex3);
function movertercero(n) {
showSlides(slideIndex3 = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot2");
if (n > slides.length) {slideIndex3 = 1}
if (n < 1) {slideIndex3 = 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[slideIndex3-1].style.display = "block";
dots[slideIndex3-1].className += " active";
}
</script>
🏚
</div>
</div>
</body>
</html>

This code wont work because there's a problem with
your JavaScript as some variables are conflicting
I will suggest you to make separate JavaScript file first and include it in your index.html like this ;
<scritp src=" *your JavaScript file path* "> </script>
this way your code is separated and it'll be easy to determine problems in your code.
well after this follow the same pattern as per link you provided of w3cSchool.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_quotes_slideshow and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple)
commented out things that you should resolve according to your requirement;
these first two are the default one 3rd is my added one just like this you have to add yourself in the code
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2">
<img src="img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3"> //NEW CLASS ADDED further more class can be added like this like 4 5 6....and so on
<img src="img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides3">
<img src="img_band_ny.jpg" style="width:100%">
</div>
here I added new number 2 as first two have 0 and 1 now 2 for third slide and 3 4 5.. and so on for more slides to be added watch out these should be added on y-axis as x-axis is responsible for no of jumps one slide should make
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
var slideIndex = [1, 1, 1]; //here array with value will be added for further increase in slides
var slideId = ["mySlides1", "mySlides2", "mySlides3"] // new classes will be added here
showSlides(0, 0);
showSlides(1, 1);
showSlides(0, 2); //this will increase as well depending upon the no. of slides you'll add
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>

I built a JS slideshow with clickable indicators. I would like for my slideshow to play automatically, while maintaining the functionality of the indicator buttons.
In the code example below, I attempted to add a setTimeout() method to change the image every 2000ms, but it seems to not be working. What would be the best approach to change the JS so I have some automation? I also attempted to use the setInterval method with no luck. I will provide the code below:
Thank you in advance for the help/tips/and advice
var editorialSlideIndex = 1;
showEditorialSlides(editorialSlideIndex);
//Next/previous controls
function plusSlides(n) {
showEditorialSlides(editorialSlideIndex += n);
}
//Thumbnail image controls
function currentSlide(n) {
showEditorialSlides(editorialSlideIndex = n);
}
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(showEditorialSlides, 2000); // Change image every 2 seconds
}
/*Slideshow Container */
.editorial-slideshow-container {
padding-top: 15px;
position: relative;
margin: auto;
}
/*Default Hide Images*/
.editorial-slideshow {
display: none;
}
/*Next and previous buttons*/
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -34px;
padding: 10px;
color: white;
font-weight: bold;
font-size: 34px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 128, 115, .5);
}
/* Position "next button" */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, background color */
.prev:hover,
.next:hover {
background-color: rgba(0, 128, 115, .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: 15;
}
*/
/* The slideslideDotInd/bullets/indicators */
.slideDotInd {
cursor: pointer;
height: 15px;
width: 15px;
margin: 15px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-slider,
.slideDotInd:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: .25s;
}
#-webkit-keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#media only screen and (max-width: 425px) {
#CGConainer .banner-title H1 {
line-height: 50px;
}
}
#media only screen and (min-width: 768px) {
.editorial-slideshow-container {
width: 75%;
/*Max width is 576px*/
}
}
#media only screen and (min-width: 1024px) {
.editorial-slideshow-container {
width: 50%;
}
}
<div class="editorial-slideshow-container">
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-1.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-2.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-3.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-4a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-5a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-6.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-7.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-8.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-9.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-10.jpg" style="width:100%">
</div>
<p class="prev" onclick="plusSlides(-1)">‹</p>
<p class="next" onclick="plusSlides(1)">›</p>
</div>
<div style="text-align:center">
<span class="slideDotInd" onclick="currentSlide(1)"></span>
<span class="slideDotInd" onclick="currentSlide(2)"></span>
<span class="slideDotInd" onclick="currentSlide(3)"></span>
<span class="slideDotInd" onclick="currentSlide(4)"></span>
<span class="slideDotInd" onclick="currentSlide(5)"></span>
<span class="slideDotInd" onclick="currentSlide(6)"></span>
<span class="slideDotInd" onclick="currentSlide(7)"></span>
<span class="slideDotInd" onclick="currentSlide(8)"></span>
<span class="slideDotInd" onclick="currentSlide(9)"></span>
<span class="slideDotInd" onclick="currentSlide(10)"></span>
</div>

It's such a small change.
The way you called setTimeout is wrong.
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(() => showEditorialSlides(editorialSlideIndex = (n+1)), 2000); // Change image every 2 seconds
}
And that was the reason your function was being called incorrectly.
EDIT: I forgot to mention the reason. There was no way JavaScript knew what parameters you were passing to the function when you're trying to recurse.
You can try it out in the fiddle

I've been searching through forums for the past few hours and can't seem to figure out why I my onclick method isn't working properly.
For context, I'm trying to get this code to output something in the console when a button is clicked.
document.getElementsByClassName("next").onclick = function test() {
console.log("hello");
}
Here are my next/previous buttons:
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
The code I'm using was referenced from w3schools, although I modified it slightly. Here's the entirety of it:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body onload="getInformation(), showSlides()">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 5</div>
<img src="https://images.pexels.com/photos/569170/pexels-photo-569170.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">5 / 5</div>
<img src="https://images.pexels.com/photos/271955/pexels-photo-271955.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<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>
<!-- 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>
</body>
</html>
CSS
html {
background-color: black;
}
body {
padding-top: 50px;
}
* {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}
}
Javascript
var slideIndex = 1;
showSlides(slideIndex);
function getInformation() {
console.log(document.getElementsByClassName("prev")[0].innerHTML);
console.log(document.getElementsByClassName("next")[0].innerHTML);
}
function updateInformation() {
console.log("The current slide is: " + slideIndex);
// console.log("Value in array is: " + [slideIndex-1]);
}
document.getElementsByClassName("next") = function test() {
console.log("hello");
}
// 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";
updateInformation();
}
If anyone could help I would greatly appreciate it. Let me know if you need any more information.

The getElementsBy* methods return HTMLCollections, which can be difficult to work with - and also, they're collections, not individual elements, so you'd have to select an individual element from it first before attaching a listener to the element. Consider using querySelectorAll instead, which returns a static NodeList - unlike an HTMLCollection, it can be iterated over directly, it won't change while it's being iterated over, and it's much more flexible.
Or if you're only selecting a single element, use querySelector instead:
document.querySelector('.next').addEventListener('click', function test() {
console.log("hello");
});
Avoid inline handlers (which are as bad as eval) and onclick, which restricts you to one listener of a type per element - use addEventListener instead.

Would you anyone please help resolve this conflict? I would really appreciate that.
I am trying to use two javascripts of Slider and Light Box from w3schools.com on one HTML page but, I guess, both javascripts use the same names(or values) for each function so when I use them in one page at the same time, they don't work. but when I remove one set of css/html/javascript for each slider or light box, either works well.
Please help this for me.
Thank you very much in advance.
CSS
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* --------- Slider ---------- */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.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: 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}
}
/* ----- Light Box -------*/
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: transparent;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
border: none;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.container {margin: 0 auto; max-width: 1000px;}
</style>
HTML
<body>
<div class="container">
<!-- ================ Slideshow ================ -->
<div class="slideshow-container mt20 mb10">
<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>
<div style="text-align:center;margin-top:10px;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div> <!-- // Slider -->
<!-- Lightbox -->
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myLightBox" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="LB-Slides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.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_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</div><!-- // Lightbox -->
</div>
Javascript
<script>
/* --------- Slider ---------- */
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 4000);
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";
}
/* --------- LightBox ---------- */
function openModal() {
document.getElementById('myLightBox').style.display = "block";
}
function closeModal() {
document.getElementById('myLightBox').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("LB-Slides");
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;
}
/* --------- //LightBox ---------- */
</script>
</body>

First of all – yes, you are right, both of your scripts are conflicting to each other due the same methods names. Since it's written in global scope (window) you basically override each other functionality.
You could try to use JavaScript module pattern to isolate scope of each of your "widgets", even if you gonna use the same methods names, your code will be executed in it's own scope.
As quick example how to rewrite this into modules:
http://jsbin.com/pipajawiwa/1/edit?html,js,output
/* --------- Slider ---------- */
var slider = (function() {
var slider = {};
slider.setIntervals = function() {
setInterval(function() {
slider.showSlides(++slider.slideIndex);
}, 4000);
};
slider.plusSlides = function(n) {
slider.showSlides(slider.slideIndex += n);
};
slider.currentSlide = function(n) {
slider.showSlides(slider.slideIndex = n);
};
slider.showSlides = function(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slider.slideIndex = 1
}
if (n < 1) {
slider.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[slider.slideIndex - 1].style.display = "block";
dots[slider.slideIndex - 1].className += " active";
};
slider.init = function() {
slider.slideIndex = 1;
slider.showSlides(slider.slideIndex);
slider.setIntervals();
};
return slider;
})();
/* --------- LightBox ---------- */
var lightbox = (function() {
var lightbox = {};
lightbox.openModal = function() {
document.getElementById('myLightBox').style.display = "block";
};
lightbox.closeModal = function() {
document.getElementById('myLightBox').style.display = "none";
};
lightbox.plusSlides = function(n) {
lightbox.showSlides(lightbox.slideIndex += n);
};
lightbox.currentSlide = function(n) {
lightbox.showSlides(lightbox.slideIndex = n);
};
lightbox.showSlides = function(n) {
var i;
var slides = document.getElementsByClassName("LB-Slides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
lightbox.slideIndex = 1
}
if (n < 1) {
lightbox.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[lightbox.slideIndex - 1].style.display = "block";
dots[lightbox.slideIndex - 1].className += " active";
captionText.innerHTML = dots[lightbox.slideIndex - 1].alt;
};
lightbox.init = function() {
lightbox.slideIndex = 1;
lightbox.showSlides(lightbox.slideIndex);
};
return lightbox;
})();
slider.init(); // initialize slider module (widget);
lightbox.init(); // initialize lightbox module (widget);
Please make note that you also need to adjust your html onclick events, since it's should be called each widget methods, not global once.
P.S.: I'm not big fan of both of this code snippets from w3school (in terms of code quality, performance aspects, learning patterns), but it's completely another topic to discuss. But in order "to make it work" this link to jsbin above should help.

I am using a slideshow based on w3school's sample. I'd like to disable or hide the previous arrow on the first slide and next arrow on the last slide.
I believe I need to edit this JavaScript to include an if else clause (if first slide, hide .prev button, else show), but the problem is my lack of understanding. I have a basic understanding of JavaScript, but going deep into the math side (n or i values) is confusing me, and I haven't yet learned jQuery.
function plusSlides(n) {
showSlides(slideIndex += n);
}
Can anyone help me with the code, and also explain what the code would mean in layman's terms?
For easy reference, the code pulled straight from the example is:
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";
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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: 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}
}
<div class="slideshow-container">
<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>
<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>

I'm not quite sure what part of the code you need an explanation for. In general terms it's just adding or substracting from the slide index, adjusting the index when it "overflows" or "underflows" and hiding the slides with a different index.
If you don't want to show first and last arrows you can just add code like
var prevArrow = document.getElementsByClassName('prev');
var nextArrow = document.getElementsByClassName('next');
prevArrow[0].style.display = "block";
nextArrow[0].style.display = "block";
if (slideIndex === 1) prevArrow[0].style.display = "none";
if (slideIndex === slides.length) nextArrow[0].style.display = "none";
That code just "hides" the "prev arrow when you're in the first slide and the "next" arrow when you're in the last", you can test it in the w3school page and it works. I hope that helps
There's a lot of room for optimization