How to make an Image Slider using jQuery, Html and CSS for Website.

Image Slider for website.

Website Tools > Image Slider

1. In this we will add an <img> tag in html, with the help of jQuery we will change its source file time to time by setInterval function.

Click Here! (Link for slider demo.)

jQuery:

<script>
            $(document).ready(function(){
                $(".sliderstatus").text('Slider Status:Working!');
                
                var count=1;
                var img=new Image();
                img.src="../img/sliderImages/1.jpg";
                $(".a1").attr("src","../img/sliderImages/1.jpg");
//When we click left button to see previous slide.       
                $(".leftb").click(function(){
                     clearInterval(start);
                     if($(".sliderstatus").text()!='Slider Status:paused!')
                        {
                        $(".sliderstatus").text( 'Slider Status:paused!');
                        }
                     $(".status").attr("src","../img/sliderImages/play.png");
                     $(".status").show();
                    if(count==1){count=4}

                    else{count--;}

                    $(".a1").attr("src","../img/sliderImages/"+count+".jpg");
                });
//When we click right button to see next slide.    
                $(".rightb").click(function(){
                    clearInterval(start);
                    if($(".sliderstatus").text()!='Slider Status:paused!')
                        {
                        $(".sliderstatus").text( 'Slider Status:paused!');
                        }
                    $(".status").attr("src","../img/sliderImages/play.png");
                    $(".status").show();
                    if(count==4){count=1}

                    else{count++;}

                    $(".a1").attr("src","../img/sliderImages/"+count+".jpg");
                });
                         
                        
                $(".status").click(function(){
                       start=setInterval(function(){ slider()},2000);
                         if($(".sliderstatus").text()=='Slider Status:paused!')
                        {
                        $(".sliderstatus").text( 'Slider Status:Working!');
                        $(".status").hide();
                        }
                });
                         
            function slider(){
                    if(count==4){count=1}

                    else{count++;}

                    $(".a1").animate({left: "-600px"});
                    $(".a1").animate({left: '0px'});
//This line will change source file of image tag.
                    $(".a1").attr("src","../img/sliderImages/"+count+".jpg");
            };
           
            var start=setInterval(function(){ slider() },2000);

            });

            function again(){
                var start;
                }
</script>

                                                                

CSS:

           #center{
                position: relative;
                top: 150px;
            }
            #slider{
                position: relative;
                height: 20%;
                width: 60%;
                left: 22%;
            }
            #center img{
                position: absolute;
                border: 3px #009933 solid;
            }
            #buttons{
                position: relative;
                top: 530px;
                padding: 3px;
            }
            #buttons img:hover{
                cursor: pointer;
            }
            .leftb{
                position: absolute;
                padding: 3px;
                margin-left: -30px;
                border: 1px solid black;
            }
            .rightb{
                position: absolute;
                padding: 3px;
                margin-left: 30px;
                border: 1px solid black;
            }
             .leftb:hover, .rightb:hover{
             border: 1.5px solid black;
             }
             .status{
                 position: absolute;
                 top: 35px;
                 left: 56%;
             } 
 

HTML:

       <div id="center">
          <div id="slider">
               <img class="a1">
          </div>
       </div>
       <div id="buttons"><center>
                   <img class="leftb" src="../img/sliderImages/left.png">     
                   <img class="rightb" src="../img/sliderImages/right.png"> 
              <p class="sliderstatus">Slider Status:</p><img class="status">
                                </center> 
       </div>