JSFiddle - React, Tailwind, and code Playground

HTML

<!--@@ -0,0 +1,25 @@ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="slider">
        <img src="Images/HUB_7443R.jpg" alt="img1" class="img__slider active" />
        <img src="Images/HUB_7446R.jpg" alt="img2" class="img__slider" />
        <img src="Images/HUB_7491R.jpg" alt="img3" class="img__slider" />
		    <img src="Images/HUB_7508R.jpg" alt="img4" class="img__slider" />
		    <img src="Images/HUB_7512R.jpg" alt="img5" class="img__slider" />
		    <img src="Images/HUB_7520R.jpg" alt="img6" class="img__slider" />
		    <img src="Images/HUB_7526R.jpg" alt="img7" class="img__slider" />
		    <img src="Images/HUB_7555R.jpg" alt="img8" class="img__slider" />
		    <img src="Images/HUB_7604R.jpg" alt="img9" class="img__slider" />
		    <img src="Images/HUB_7612R.jpg" alt="img10" class="img__slider" />
		    <img src="Images/HUB_7626R.jpg" alt="img11" class="img__slider" />
		    <img src="Images/HUB_7627R.jpg" alt="img12" class="img__slider" />
		    <img src="Images/HUB_7652R.jpg" alt="img13" class="img__slider" />
		    <img src="Images/HUB_7653R.jpg" alt="img14" class="img__slider" />
		    <img src="Images/HUB_7656R.jpg" alt="img14" class="img__slider" />
		    <img src="Images/HUB_7682R.jpg" alt="img15" class="img__slider" />
		    <img src="Images/HUB_7682R1.jpg" alt="img16" class="img__slider" />
		    <img src="Images/HUB_7686R.jpg" alt="img17" class="img__slider" />
		    <img src="Images/HUB_7688R.jpg" alt="img18"...

CSS

<style>
@@ -0,0 +1,42 @@
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.slider {
    height: 80vh;
    position: relative;
}

.slider img {
    object-fit: cover;
    height: auto;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
}

.slider img.active {
    opacity: 1;
}

.suivant, .precedent {	
    color: #fff;
    font-size: 6rem;
    position: absolute;
    top: 95%;			/* Position des flèches */
    transform: translateY(-50%);
    cursor: pointer;
}

.suivant {
    right: 1rem;
}

.precedent {
    left: 1rem;
}
</style>

JavaScript

/* @@ -0,0 +1,41 @@ */
let img__slider = document.getElementsByClassName('img__slider');

let etape = 0;

let nbr__img = img__slider.length;

let precedent = document.querySelector('.precedent');
let suivant = document.querySelector('.suivant');

function enleverActiveImages() {
    for(let i = 0 ; i < nbr__img ; i++) {
        img__slider[i].classList.remove('active');
    }
}

suivant.addEventListener('click', function() {
    etape++;
    if(etape >= nbr__img) {
        etape = 0;
    }
    enleverActiveImages();
    img__slider[etape].classList.add('active');
})

precedent.addEventListener('click', function() {
    etape--;
    if(etape < 0) {
        etape = nbr__img - 1;
    }
    enleverActiveImages();
    img__slider[etape].classList.add('active');
})

setInterval(function() {
    etape++;
    if(etape >= nbr__img) {
        etape = 0;
    }
    enleverActiveImages();
    img__slider[etape].classList.add('active');
}, 1000) /* milliseconde */