Simple Slider With jQuery | jQuery Slider | jQuery Image Slider | jQuery

Hello Developer , today we create very very very simple slider using jQuery. In most of website we need image slider or quote slider or any other slider. So when we find slider online we get very complicated slider code in javascript so that's why to day we learn how to create slider in jQuery with simple code.

In this article we see 3 jQuery slider. So

Let's Start Create Simple jQuery Slider

#1 First Slider using jQuery, HTML and CSS.

First you need to create one index.html file.

  
<div id="slideshow">
   <div>
     <img src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg">
   </div>
   <div>
     <img src="http://blog.burrard-lucas.com/wp-content/uploads/flowers/flower_4.jpg">
   </div>
</div>

Then create one style.css file.

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}  

Now create jQuery file script.js

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);  

#2 Second Slider using jQuery, HTML and CSS.

create one index.html file.

  
<div id="slideshow">
       
    <a href="#" class="slideshow-prev">&laquo;</a> 
       
<ul>
            
    <li><img src="1.jpg" alt="photo1" /></li>
            
    <li><img src="2.jpg" alt="photo2" /></li>
            
    <li><img src="3.jpg" alt="photo3" /></li>
            
    <li><img src="4.jpg" alt="photo4" /></li>
       
</ul>
        
    <a href="#" class="slideshow-next">&raquo;</a> 

    
</div>

Then create one style.css file.

 body{
            text-align: center;
        }
        
        #slideshow{
            margin:0 auto;
            width:600px;
            height:450px;
            overflow: hidden;
            position: relative;
        }

        #slideshow ul{
            list-style: none;
            margin:0;
            padding:0;
            position: absolute;
        }

        #slideshow li{
            float:left;
        }

        #slideshow a:hover{
            background: rgba(0,0,0,0.8);
            border-color: #000;
        }

        #slideshow a:active{
            background: #990;
        }

        .slideshow-prev, .slideshow-next{
            position: absolute;
            top:180px;
            font-size: 30px;
            text-decoration: none;
            color:#fff;
            background: rgba(0,0,0,0.5);
            padding: 5px;
            z-index:2;
        }
        
        .slideshow-prev{
            left:0px;
            border-left: 3px solid #fff;
        }

        .slideshow-next{
            right:0px;
            border-right: 3px solid #fff;
        }

Now create jQuery file script.js

  //an image width in pixels 
        var imageWidth = 600;
    

        //DOM and all content is loaded 
        $(window).ready(function() {
            
            var currentImage = 0;

            //set image count 
            var allImages = $('#slideshow li img').length;
            
            //setup slideshow frame width
            $('#slideshow ul').width(allImages*imageWidth);

            //attach click event to slideshow buttons
            $('.slideshow-next').click(function(){
                
                //increase image counter
                currentImage++;
                //if we are at the end let set it to 0
                if(currentImage>=allImages) currentImage = 0;
                //calcualte and set position
                setFramePosition(currentImage);

            });

            $('.slideshow-prev').click(function(){
                
                //decrease image counter
                currentImage--;
                //if we are at the end let set it to 0
                if(currentImage<0) currentImage = allImages-1;
                //calcualte and set position
                setFramePosition(currentImage);

            });
           
        });

        //calculate the slideshow frame position and animate it to the new position
        function setFramePosition(pos){
            
            //calculate position
            var px = imageWidth*pos*-1;
            //set ul left position
            $('#slideshow ul').animate({
                left: px
            }, 300);
        }

#3 Third Slider using jQuery, HTML and CSS.

create one index.html file.

  
<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 

Then create one style.css file.

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

Now create jQuery file script.js

 jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
 var slideCount = $('#slider ul li').length;
 var slideWidth = $('#slider ul li').width();
 var slideHeight = $('#slider ul li').height();
 var sliderUlWidth = slideCount * slideWidth;
 
 $('#slider').css({ width: slideWidth, height: slideHeight });
 
 $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
 
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});