JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div id="container">
    <div id="slider">   

        <img id="img1" src="http://vjim.ac.in/img/Vimal-Jyothi-Institute-of-Management-and-Research.jpg" border="0"/>
        <img id="img2" src="http://vjim.ac.in/img/Vimal-Jyothi-Institute-of-Management-and-Research.jpg " border="0"/>
        <img id="img3" src="http://vjim.ac.in/img/Vimal-Jyothi-Institute-of-Management-and-Research.jpg " border="0"/>
        <img id="img4" src="http://vjim.ac.in/img/Vimal-Jyothi-Institute-of-Management-and-Research.jpg " border="0"/>

    </div>
</div>

CSS

#slider{
    height: 600px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 10px;
}

#slider img{
    height: 100%;
    max-width: none;
    display: block;
    border-radius: 10px;
    margin: 0 auto;
    display:none;
}

JavaScript

var sc=$("#slider img").size();
var count=0;
nextSlide();

function nextSlide(){
    count=count==sc?1:++count;
    $("#slider #img"+count).fadeIn(500).delay(1500).fadeOut(500);
    setTimeout(nextSlide,2500);
}