JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<html>
    <head>
        <title>Awesome Website</title>
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    </head>  
    <body>
        <header>
        <span><i class="fa fa-phone" aria-dgdfgdgfhidden="true"></i> Cell sdssfdPhone</span>
        <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
        </header>           
        <div class="logo">
            <img src="" alt="Image">
        </div>
        <nav>
            <ul class="topnav">
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
                </li>
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#"> ABOUT</a></li>
                <li><a href="#">CONSULTING SERVICES</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>         
        <!------------Slide Section---------------------------->   
        <div class="wrapper">
            <section id="slider">
                <img id="1" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images">
                <img id="2" src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS">
                <img id="3" src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here">
            </section>
                <a href="" class="left">Previous</a>
                <a href="" class="right">Next</a>
        </div>                
        <script src="js/jquery-2.2.4.min.js"></script>
         <script src="js/slider.js"></script>  
    </body>
</html>

CSS

*{margin:0;padding:0}
.wrapper{
    width: 100%;
    margin:0 auto
}
html,body{
  height: 100%;
  width: 100%;
}
img{
    position: absolute;
    width:100%;
    height: 100%;
    display:hidden;
}
#slider{
    position:relative;
    width: 100%;
    height: 600px;
    display:hidden; 
}
#slider img{
    display:none;
}
.wrapper a{
    padding: 5px 10px;
    background-color:blue; 
}
a.left{
    float:left;
}
a.right{
    float:right;
}

JavaScript

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
   $("#slider > img#1").fadeIn(300) ;
    startSlider();   
});
function startSlider(){
    count= $("#slider > img").size(); 
    loop = setInterval(function(){      
        if(sliderNext > count){
            sliderNext = 1;
            sliderint = 1;
        }  
       $("#slider > img").fadeOut(300); 
       $("#slider > img#" + sliderNext()).fadeIn(300);
       sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
        
    },3000)
    
}