add auto slide functionality in below snippet

Question

I found this snippet on internet for responsive image slider every thing works fine but i need to add auto slide functionality, I am newbie in field of jquery so little help needed.

$(document).ready(function(){
    var $slider = $('.slider');
    var $slideBox = $slider.find('.slide-box');
    var $leftControl = $slider.find('.slide-left');
    var $rightControl = $slider.find('.slide-right');
    var $slides = $slider.find('.slide');
    var numItems = $slider.find('.slide').length;
    var position = 0;

    /*on click functionality */
    var windowWidth = $(window).width();
    $slides.width(windowWidth);
    $leftControl.on('click', function(){
        var width = $slider.width();
        position = position - 1 >= 0 ? position - 1 : numItems - 1;
        if(position != numItems-1){
            $slider.find('.slide').eq(position + 1).css('margin-left', 0);
        }
        else{
            $slider.find('.slide:gt(0)').each(function(index){
                $(this).css('margin-left', width * -1 + 'px');
            });
        }
    });

    $rightControl.on('click', function(){
        var width = $slider.width();
        position = position + 1 < numItems ? position + 1 : 0;
        if(position != 0){
            $slider.find('.slide').eq(position).css('margin-left',  width * -1 + 'px');
        }
        else{
            $slider.find('.slide').css('margin-left', 0);
        }
    });

    $(window).resize(function(){
        $slides.width($(window).width()).height($(window).height);
    });
})

could you replicate the same on jsfiddle,http://jsfiddle.net — dreamweiver, Sep 04 '15 at 07:31
What have you tried so far? Please, learn [how to ask a good question](http://stackoverflow.com/help/how-to-ask). Remember that this is not a code-writing service. — Ernest, Sep 04 '15 at 07:48

score 1 · Accepted Answer · answered Sep 04 '15 at 07:37

Can you please try with this modified code:

Please modify var autoSlideTime as per your requirement.

$(document).ready(function(){
    var $slider = $('.slider');
    var $slideBox = $slider.find('.slide-box');
    var $leftControl = $slider.find('.slide-left');
    var $rightControl = $slider.find('.slide-right');
    var $slides = $slider.find('.slide');
    var numItems = $slider.find('.slide').length;
    var position = 0;
    var autoSlideTime = 5000; //auto slide after 5 seconds

    /*on click functionality */
    var windowWidth = $(window).width();
    $slides.width(windowWidth);
    $leftControl.on('click', function(){
        clearInterval(slideInterval);
        var width = $slider.width();
        position = position - 1 >= 0 ? position - 1 : numItems - 1;
        if(position != numItems-1){
            $slider.find('.slide').eq(position + 1).css('margin-left', 0);
        }
        else{
            $slider.find('.slide:gt(0)').each(function(index){
                $(this).css('margin-left', width * -1 + 'px');
            });
        }
        AutoSlide();
    });

    $rightControl.on('click', function(){
        clearInterval(slideInterval);
        var width = $slider.width();
        position = position + 1 < numItems ? position + 1 : 0;
        if(position != 0){
            $slider.find('.slide').eq(position).css('margin-left',  width * -1 + 'px');
        }
        else{
            $slider.find('.slide').css('margin-left', 0);
        }
        AutoSlide();
    });

    $(window).resize(function(){
        $slides.width($(window).width()).height($(window).height);
    });

    //functionality for autoslide
    var slideInterval = null;
    function AutoSlide(){
        slideInterval = setInterval(function(){
            $rightControl.click();
        },autoSlideTime);
    }
    AutoSlide();

})

you can accept the answer if you want so that it will be marked as answered. — vijayP, Sep 04 '15 at 13:01

add auto slide functionality in below snippet

1 Answers1