We Keep Coding

Image slideshow speeding up whenever I click through it

Disclaimer, I'm a total beginner.
I've been working on a website, and I wanted to create an image carousel - it's on a timer to flick through some images, but whenever I click the arrows to scroll through it speeds up? I've tried several things I've found on the web, but it's just not working - yes I am trying to clear my timers but I'm clearly doing something off because it's still not working.
Code:
HTML:
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img class="ratio" src="carosel/1.1.jpg" style="width:100%; display:block">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img class="ratio" src="carosel/2.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img class="ratio" src="carosel/3.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img class="ratio" src="carosel/4.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img class="ratio" src="carosel/5.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
CSS:
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.ratio {aspect-ratio: 2/0.80;}
/* 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;
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 */
.caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.title {
color: #f2f2f2;
font-size: 40px;
padding: 20px 20px;
position: absolute;
bottom: 130px;
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 = 0;
showSlides(); // call showslide method
function plusSlides(n) {
showSlides(slideIndex += n);
}
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
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";
}
if(!n) {
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";
sliderTimer = setTimeout(showSlides, 7000);
}

For a more consistent animation, its recomended to use requestAnimationFrame instead of setTimeout or setInterval.
For further information, you can refer to:
Why is requestAnimationFrame better than setInterval or setTimeout
requestAnimationFrame loop not correct FPS
https://www.youtube.com/watch?v=cCOL7MC4Pl0

image slide show with both automated and manual controls

The code runs quite well, the only issue i'm experiencing is that it doesn't start until its initiated with the control button. I need it to start sliding as soon as the page is loaded, I think it has to do with the display but i'm not quite sure. Kindly go through my code below and correct as appropriate i'll go to the stars and back to make sacrifices for the pandemic to be over if I get a solution
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
* {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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height:50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height: 50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue;height: 50px;"> </div>
<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>

Progress carousel forward or backward if button click else timed progress forward

I am trying to create a manual and automatic scrolling slideshow. I'm having trouble getting the carousel to progresses to the next slide when the left facing arrow is clicked and to move backwards through the slide when the right facing arrow is clicked, while maintain the 5 second automatic progression to the next side.
window.onload = function() { // add window.onload here and set it euqal to a function
var slideIndex = 0;
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");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length)
{
slideIndex = 1
}
if (n > slides.length) {
slideIndex = 0
}
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, 5000); // Change image every 5 seconds
}
}
* {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: 28px;
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}
}
<html>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997100823773184/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >one on one weekly siminars</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997228791988244/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >monthly seminars/workshops</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997338716176395/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >nursing home visits</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/42.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >community service</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/21.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >college visits</span></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="curretnslide(4)"></span>
<span class="dot" onclick="currentslide(5)"></span>
</div>
</body>

It's still a bit buggy but is this what you want?
var slideIndex = 0;
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");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
if (n > slides.length) {
slideIndex = 0;
}
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, 5000); // Change image every 5 seconds
}
* {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: 28px;
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}
}
<html>
<head>
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997100823773184/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style="background-color: black">one on one weekly siminars</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997228791988244/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style="background-color: black">monthly seminars/workshops</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997338716176395/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style="background-color: black">nursing home visits</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/42.jpg" style="width:970px; height: 500px;">
<div class="text"><span style="background-color: black">community service</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/21.jpg" style="width:970px; height: 500px;">
<div class="text"><span style="background-color: black">college visits</span></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>

Here, i fixed your problem. Added function bind that will reset the timeinterval.
And also fixed the arrows
window.onload = function() { // add window.onload here and set it euqal to a function
var timeOut;
var slideIndex = 0;
var slides;
showSlides(slideIndex);
// Next/previous controls
window.plusSlides =function (n) {
showSlides(n);
}
// Thumbnail image controls
window.currentSlide = function(n) {
slideIndex = (n -1)
showSlides();
}
function bind(){
clearInterval(timeOut)
timeOut =setInterval(showSlides, 5000);
}
function showSlides(n) {
var i;
slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if (n)
slideIndex += n;
else slideIndex++;
if (slideIndex >= slides.length || slideIndex < 1)
{
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";
bind();
}
}
* {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: 42px;
border-radius: 3px 0 0 3px;
z-index:999999;
}
/* 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: 28px;
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}
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997100823773184/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >one on one weekly siminars</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997228791988244/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >monthly seminars/workshops</span></div>
</div>
<div class="mySlides fade">
<img src="https://cdn.discordapp.com/attachments/502541850985496596/536997338716176395/image0.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >nursing home visits</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/42.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >community service</span></div>
</div>
<div class="mySlides fade">
<img src="pictures%20updated/21.jpg" style="width:970px; height: 500px;">
<div class="text"><span style = "background-color: black" >college visits</span></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>

Image in slider dissapear after few seconds

I'm implementing a simple image slider in my Middleman project. The images show up and the bullets are clickable. The images are linked with image_tags in Middleman. However, after an image appears it disappears after a few seconds! The only thing I could find which could have an effect on this would be the fade-in option.
After extensively looking with the inspector I couldn't find anything which causes the image not to show up.
Below my current code.
HTML
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<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;
}
/* 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}
}
.slider-img {
width: 100%;
}
JS
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";
}

I try your code in fiddle and it's work fine :
Here is my fiddle http://jsfiddle.net/numa1x39/8/
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";
}
* {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}
}
.slider-img {
width: 100%;
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01125088.jpg" class="slider-img">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01324464.jpg" class="slider-img">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01324567.jpg" class="slider-img">
<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>
</div>

Creating a Slideshow in different files

This is the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style2.css">
<script src="learn1.js"</script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="learnimg/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="learnimg/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="learnimg/3.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>`
This is the css code
* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container */ .slideshow-container { max-width: 1000px;
position: relative; margin: auto; }
/* Next & previous buttons */ .prev, .next { cursor: pointer;
position: absolute; top: 0; 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) { .slprev, .slnext,.text {font-size: 11px} }
This is the javascript code
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"; }
All these 3 codes are in different files. This is basically for the creation of a simple slideshow of three images. But when I execute this(all in different files) there is nothing to display(white screen in the browser). But when executed in a single html file(all contents in a single file) there is a perfect slideshow.
I cannot figure out this problem. Please help me out with this.

This doesn't seem right :
<script src="learn1.js"</script>
You forgot to close the opening tag, as such :
<script src="learn1.js"></script>
Plus, it's always a good habit to specify your resource type :
<script type="text/javascript" src="learn1.js"></script>

The code you posted seems to work just fine.
Maybe the image files isn't where you say they are?
Try opening the console and look for errors.
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";
}
{
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 0;
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) {
.slprev,
.slnext,
.text {
font-size: 11px
}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100" 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>