JSFiddle - React, Tailwind, and code Playground

by pawangupta18

HTML

<div class="container">

<div class="slider-container">
    
    <div class="slider">
        <img src="https://jssors8.azureedge.net/demos/img/gallery/980x380/002.jpg" alt="slider 1">
        <div class="caption">Caption text 1</div>
    </div>
     
       <div class="slider">
        <img src="https://static.vecteezy.com/system/resources/thumbnails/006/640/536/small/nature-of-green-leaf-in-garden-at-summer-natural-green-leaves-plants-using-as-spring-background-cover-page-greenery-environment-ecology-wallpaper-photo.jpg" alt="slider 2">
        <div class="caption">Caption text 2</div>
    </div>
    
        <div class="slider">
        <img src="https://wowslider.com/sliders/demo-9/data/images/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="slider 3">
        <div class="caption">Caption text 3</div>
    </div>
    
        <div class="slider">
        <img src="https://mail.chamedindia.com/images/main-slider/image-3.jpg" alt="slider 4">
        <div class="caption">Caption text 4</div>
    </div>
    
     <div class="slider">
        <img src="https://jssors8.azureedge.net/demos/img/gallery/980x380/023.jpg" alt="slider 5">
        <div class="caption">Caption text 5</div>
    </div>
    <span class="arrow pre" onclick="controller(-1)"> &#10094;</span>
    <span class="arrow next" onclick="controller(1)"> &#10095;</span>
</div>    
 
   </div>

CSS

*{margin: 0px; padding: 0px; list-style: none; box-sizing: border-box;}
body{margin: 0px; padding: 0px; list-style: none;}    
.container{ width: 1270px; margin: 0 auto;}
.slider-container{width: 100%; height: auto; position: relative;}
.slider{width: 100%; height: auto; position: relative;  height: 350px; overflow: hidden;}
.slider img{width: 100%; height: auto; display: block;}
.caption{position: absolute; left: 0px; bottom: 5px; z-index: 1; margin: 0 auto; text-align: center; background-color: #fff; padding: 15px 50px; color: #000; font-weight: bold; transform: translate(-50%, -20%); left: 50%; bottom: 0%;}       
.slider{display: none;}
.slider-container .arrow {position: absolute; transform: translate(-50%, -50%); top: 45%; font-size: 25px; font-weight: bold; background-color: #fff; padding: 15px; border-radius: 50%;width: 45px;height: 45px;text-align: center;line-height: 15px;cursor: pointer;}   
.slider-container .arrow.pre {left: 26px;}    
.slider-container .arrow.next {right: -22px;}    
.slider{display: none;}

JavaScript

let flag = 1; 
        
        
    function sliderShow(num){
        let sliders = document.querySelectorAll(".slider");
        
        if(num == sliders.length ){
            flag = 0;
            num = 0;
        }
        if(num < 0){
            flag = sliders.length-1;
            num = sliders.length-1;
        }
        
        for(let y of sliders){
            y.style.display = "none";
        }
    
        sliders[num].style.display = "block";
    };

    
    sliderShow(flag);    
    
        
    function controller(x){
       flag = flag + x;
       sliderShow(flag);
   }