Custom Slider

 

URL:-

https://jsfiddle.net/pawangupta18/rezqs7ao/

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:-

<style>
*{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;}    

</style>

js:-

<script>

    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);

   }      

 </script>