We Keep Coding

How to make image slider respond to thumb swipe

Hi I am using the basic W3 slideshow layout but It is not very good for the mobile version of my site.
I searched very hard to find a solution to this but it's always download some plug-in to make it work or something that doesn't respond very well to swipes
$('.slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
$(this).slider('next');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
$(this).slider('prev');
}
});
$(this).on('touchend', function() {
$(this).off('touchmove');
});
});
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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 */
.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 {
animation-name: fade;
animation-duration: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>
</div>

Even though this is not pure Js and it is a different approach
I found that flickity.js and css is good for mobile and it's just 2 ajax calls like jquery
https://flickity.metafizzy.co/api.html
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css">
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
CSS
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 28%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.button {
font-size: 22px;
}
.button-group {
margin-bottom: 20px;
}
Js
// external js: flickity.pkgd.js
var flkty = new Flickity( '.carousel', {
groupCells: true
});
var buttonGroup = document.querySelector('.button-group');
var buttons = buttonGroup.querySelectorAll('.button');
buttons = fizzyUIUtils.makeArray( buttons );
buttonGroup.addEventListener( 'click', function( event ) {
// filter for button clicks
if ( !matchesSelector( event.target, '.button' ) ) {
return;
}
var index = buttons.indexOf( event.target );
flkty.selectCell( index );
});

Like i wrote in the comments, you have two typos: $(this).one('touchmove and .slider, which has to be $(this).on('touchmove and #slider.
But the main problem is your function slider(), which isn't defined. But you can use the function plusSlides(), that you are already using for the next and prev buttons.
Furthermore the touchmove event is firing very often until the touchend event is fired. Therefor the function plusSlides() is called multiple times. To fix this, stop the touchmove event listener when the function plusSlides() is called.
Working example:
$('#slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).on('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
plusSlides(1);
$(this).off('touchmove');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
plusSlides(-1);
$(this).off('touchmove');
}
});
});
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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 */
.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 {
animation-name: fade;
animation-duration: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>
</div>

Jquery Slider arrows not appearing

I'm doing a Jquery Slider and I have a problem with my last image.
The arrows are appearing for all the images but not the last one it disappear and I don't understand why, can anybody help me ?
Here's my codepen : https://codepen.io/Softee/pen/WNZpXGa
here's my code :
var slideIndex = 1;
showImage(slideIndex);
function plusIndex(n) {
showImage(slideIndex += n);
}
function currentSlide(n) {
showImage(slideIndex = n);
}
function showImage(n) {
var slide = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dots");
if (n > slide.length) {
slideIndex = 1
};
if (n < 1) {
slideIndex = slide.length
};
for (var i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
};
slide[slideIndex - 1].style.display = "block";
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
};
}
autoSlide();
function autoSlide(){
var i;
var x = document.getElementsByClassName("slides");
for(i=0;i<x.length;i++);
{
x[i].style.display = "none";
}
if(index > x.length){ index = 1}
x[index-1].style.display = "block";
index++;
setTimeout(autoSlide,2000);
}
body {
margin: 0;
font-family: verdana, sans-serif;
}
.slideshow-container {
width: 800px;
position: relative;
margin: auto;
}
.slides {
display: none;
}
.slideshow-container img {
width: 800px;
}
.number {
position: absolute;
padding: 8px 12px;
color: #f2f2f2;
}
.text {
text-align: center;
font-size: 18px;
position: absolute;
width: 100%;
padding: 8px 16px;
bottom: 55px;
color: #f2f2f2;
font-weight: bold;
}
.prev,
.next {
position: absolute;
margin-top: -250px;
color: #f2f2f2;
font-weight: bold;
padding: 10px 10px;
font-size: 18px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.next {
border-radius: 3px 0 0 3px;
right: 0;
}
.prev:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
.dots {
width: 10px;
height: 10px;
display: inline-block;
background: grey;
padding: 5px;
border-radius: 50%;
cursor: pointer;
}
.fade {
animation-name: fade;
animation-duration: 0.5s;
}
#keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.active,
.dots:hover {
background: #333;
}
<!--Container Slide Show-->
<div class="slideshow-container">
<div class="slides fade">
<div class="number">1 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Taj Mahal</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">2 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Chichen Itza</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">3 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Colisée</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">4 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Machu Picchu</div>
</div>
<a class="prev" onclick="plusIndex(-1)">&#10094</a>
<a class="next" onclick="plusIndex(+1)">&#10095</a>
</div>
<br/>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
....................................

This issue can be fixed by editing your CSS. So rather than:
.prev, .next {
position: absolute;
top: -250px;
do:
.prev,.next {
position: absolute;
margin-top: -250px;
This prevents the arrows from moving above the .slides divs when you reach the last slide.
For the autoslide functionality, there's no need for all the complicated code. Just trigger a call to the click event on the .next div. Also, use setInterval() and not setTimeout. So replace the entire definition and call to the autoslide() function with the following code:
setInterval(() => {
document.querySelector(".next").click()
}, 2000);
Check out the updated pen on https://codepen.io/cedric-ipkiss/pen/BamzBmz

How to change image using arrow keys using javascript

So I have this gallery. I need to change the image when the user will press the arrow keys after the modal popup. left arrow key to change the image in the left and the right arrow key for right. I'm pretty new to javascript so if you can help me it would be great.
Please see the code snippet in full page.
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
document.getElementById("prev1").click()
} else if (e.keyCode === 39) {
document.getElementById("next1").click()
}
});

Add fade effect to a slideshow

I have this slideshow copied from codepen. I have manipulated something to make it my own. Everything works fine but I wanted to add a fade effect and I don't know how. I don't know if it will be adding something to the css file or to the javascript. It would also be good to add the slide effect because the image just disappears and the other appears on top.
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);
}

Use
opacity: 0;
and
visibility: "hidden";
and not display: none; so you can add a transition with CSS for the Fade effect.
I have modified your code and added it to the link below.
https://jsfiddle.net/8hdt4rfu/3/
P.s. If you want a more sophisticated solution, there are some functions, for FadeIn and FadeOut effect, that you can implement and use in your js, such as this: https://www.geeksforgeeks.org/how-to-add-fade-out-effect-using-pure-javascript/#:~:text=The%20fadeOut%20effect%20is%20used,clearInterval%20method%20in%20this%20logic.

how to fix this Javascript Image Slideshow Error?

I tried to make an image slideshow on javascript but when I run it the first image doesn't show up until I hit the dot or previous and next button. It doesn't show any error too but the image just doesn't show up for the first time. This code consists of Javascript, HTML, and CSS. I need to finish this by tomorrow so anyone that can help me with this?
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function next(n) {
showSlides(slideIndex += n);
}
function dot(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("picture");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<style type="text/css">
*{
box-sizing: border-box;
}
.slide{
max-width: 1000px;
position: relative;
margin: auto;
animation-name: fade;
animation-duration: 1s;
}
.picture{
display: none;
}
.prev, .next{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: grey;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: black;
opacity: 40%;
}
.text{
color: white;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
background: grey;
transition: .5 ease;
}
.picture:hover .text{
opacity: 1;
}
.dot{
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: gray;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: silver;
}
</style>
</head>
<body>
<div class="slide">
<div class="picture" style="">
<img name="pic0" src="coding.png" style="width: 100%">
<div class="text">Holy Trinity of Client Side</div>
</div>
<div class="picture" style="">
<img name="pic1" src="html.png" style="width: 400px">
<div class="text">HTML is the standard markup language for creating Web pages</div>
</div>
<div class="picture" align="center">
<img name="pic2" src="css.png" style="width: 300px">
<div class="text">CSS are used to format the layout of Web pages</div>
</div>
<div class="picture" align="right" style="">
<img name="pic3" src="js.png" style="width: 300px">
<div class="text">JavaScript is a programming language that allows you to implement complex features on web pages</div>
</div>
<a class="prev" onclick="next(-1)">❰</a>
<a class="next" onclick="next(+1)">❱</a>
</div>
<div style="text-align: center">
<span class="dot" onclick="dot(1)"></span>
<span class="dot" onclick="dot(2)"></span>
<span class="dot" onclick="dot(3)"></span>
<span class="dot" onclick="dot(4)"></span>
</div>
</body>
</html>
Can someone help me figure this out?