Create Simple Slider In jQuery

March 20, 2016 (last updated on: August 20, 2016)
Tutorials
0 Comment
2,369 Views

Easy way to create simple slider in jQuery, create simple slider without complexity, tutorial and jquery example code and slider demo.

How To Create Simple Slider In jQuery

Very easy, we need 2 buttons, and click event, and CSS style, only.

Create Simple Slider

HTML Element:

<!-- By Qassim Hassan, wp-time.com -->

<div class="slider">
    <img class="show" src="https://wp-time.com/image1.png"> <!-- first image has class "show" IMPORTANT! -->
    <img src="https://wp-time.com/image2.png">
    <img src="https://wp-time.com/image3.png">
</div>

<!--
    Note: for buttons, you can use any HTML element,
    for example <div id="next">Next</div> and <div id="prev">Prev</div>
-->
<button id="prev">Prev</button>
<button id="next">Next</button>

jQuery Code:

/*
    Slider By Qassim Hassan, wp-time.com
*/

$( function() {

    /* Next Button */
    $("#next").click( function(){ // if click on "next" button:

        if( !$('.show').is(':last-child') ){ // check if image is not last child:
            $(".show").removeClass("show").next().addClass("show"); // remove class "show" from current image and add class "show" to next image.
        }

    });

    /* Prev Button */
    $("#prev").click( function(){ // if click on "prev" button:

        if( !$('.show').is(':first-child') ){ // check if image is not first child:
            $(".show").removeClass("show").prev().addClass("show"); // remove class "show" from current image and add class "show" to previous image.
        }

    });

});

CSS Code:

/*
    Style By Qassim Hassan, wp-time.com
*/

.slider{
    width:500px;
    height: 500px;
    margin:0 auto;
    background-color: #000; /* wrap background color */
    display:block;
    position:relative;
}

.slider img{
    position:absolute;
    width:100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.5s; /* fade effect */
}

.slider .show{
    visibility: visible;
    opacity: 1;
    transition: all ease 0.5s; /* fade effect */
}

Done.