I found this slideshow on codepen and decided to customize it to make it my own. While everything is working well, I wanted to incorporate a fade effect into the transition between slides. I'm unsure whether I should add something to the CSS file or modify the JavaScript code. Additionally, I would like to enhance the slide effect as currently, the image simply disappears and the next one appears abruptly on top of it.
index.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="slideshow.js" type="text/javascript"></script>
</head>
<body>
<div class="slideshow-container">
<div class="slideshow-inner">
<div class="mySlides fade">
<img src='imagenes/uno.jpg' style='width: 100%;' alt="sally lightfoot crab"/>
</div>
<div class="mySlides fade">
<img src='imagenes/dos.jpg' style='width: 100%;' alt="fighting nazca boobies"/>
</div>
<div class="mySlides fade">
<img src='imagenes/tres.jpg' style='width: 100%;' alt="otovalo waterfall"/>
</div>
<div class="mySlides fade">
<img src='imagenes/tres.jpg' style='width: 100%;' alt="pelican"/>
</div>
</div>
<a class="prev" onclick='plusSlides(-1)'>❮</a>
<a class="next" onclick='plusSlides(1)'>❯</a>
</div>
<br/>
</div>
</body>
</html>
estilos.css
.slideshow-container {
/*max-width: 100px;*/
width:100%;
position: relative;
margin: auto;
}
.mySlides {
display: none;
/*height: 400px;*/
/*border: solid 1px black;*/
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #222428;
font-weight: bold;
font-size: 30px;
transition: .6s ease;
border-radius: 0 3px 3px 0
}
.next {
right: 0px;
border-radius: 3px 3px 3px 3px
}
.prev {
left: 0px;
border-radius: 3px 3px 3px 3px
}
.prev:hover,
.next:hover {
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.8)
}
.text {
color: #f2f2f2;
font-size: 15px;
padding-top: 12px;
padding-bottom: 12px;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background-color: #222428
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color .6s ease
}
.active,
.dot:hover {
background-color: #717171
}
slideshow.js
var slideIndex = 1;
var myTimer;
var slideshowContainer;
window.addEventListener("load",function() {
showSlides(slideIndex);
myTimer = setInterval(function(){plusSlides(1)}, 2000);
//COMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
slideshowContainer = document.getElementsByClassName('slideshow-inner')[0];
//UNCOMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
//slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
// slideshowContainer.addEventListener('mouseenter', pause)
//slideshowContainer.addEventListener('mouseleave', resume)
})
// NEXT AND PREVIOUS CONTROL
function plusSlides(n){
clearInterval(myTimer);
if (n < 0){
showSlides(slideIndex -= 1);
} else {
showSlides(slideIndex += 1);
}
//COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
if (n === -1){
myTimer = setInterval(function(){plusSlides(n + 2)}, 2000);
} else {
myTimer = setInterval(function(){plusSlides(n + 1)}, 2000);
}
}
//Controls the current slide and resets interval if needed
function currentSlide(n){
clearInterval(myTimer);
myTimer = setInterval(function(){plusSlides(n + 1)}, 2000);
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";
}
pause = () => {
clearInterval(myTimer);
}
resume = () =>{
clearInterval(myTimer);
myTimer = setInterval(function(){plusSlides(slideIndex)}, 2000);
}