CODEWITHSUNDEEP
javascriptjqueryslider
Mark
Mark

Reputation: 1126

Making a slider cycle automatically

My javascript is pretty basic and I'm looking for a nudge in the right direction

I've just made a simple slider which works great when clicked. But I've now been asked to make it cycle through the slides automatically.

Can you suggest what sort of functions I should be looking at?

I've put a work copy of my code on codepen here: http://codepen.io/DeadWhisky/pen/kvytH

And here's the javascript:

$("#kickstart").click(function () {
    document.getElementById("slider-ul").style.top="0px";
    document.getElementById("slider-nav").style.background="url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 -201px";
});

$("#support").click(function () {
    document.getElementById("slider-ul").style.top="-160px";
    document.getElementById("slider-nav").style.background="url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 -161px";        
});

$("#security").click(function () {
    document.getElementById("slider-ul").style.top="-320px";
    document.getElementById("slider-nav").style.background="url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 -121px";
});

$("#network").click(function () {
    document.getElementById("slider-ul").style.top="-480px";
    document.getElementById("slider-nav").style.background="url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 -81px";        
});

$("#slider-nav li").click(function() {
    $("#slider-nav li").removeClass("selected");
    $(this).addClass("selected");
});

Upvotes: 0

Views: 223

Answers (2)

Tricky12
Tricky12

Reputation: 6822

You can use setInterval to make a function run every so many milliseconds. This function can move to the next slide. Note that this will affect your .click functions slightly, as they may be clicked at the same time the interval is auto-switching slides.

JSFiddle

var top = -320;
var offset = -121;
var nextSibling;
setInterval(function () {
    autoSlide();
}, 3000);

function autoSlide() {
    if (top == -480) {
        top = 0;
        offset = -201;
        nextSibling = $("#slider-nav li:first");
    } else {
        top -= 160;
        offset += 40;
        nextSibling = $(".selected").next("li");
    }
    document.getElementById("slider-ul").style.top = top + "px";
    document.getElementById("slider-nav").style.background = "url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 " + offset + "px";
    $("#slider-nav li").removeClass("selected");
    nextSibling.addClass("selected");
}

Upvotes: 1

Anton
Anton

Reputation: 32581

Try this, use setInterval() and calculate the position 

    var moveAmm = 0;
    var bgAmm = 201;
    var slideInterval = setInterval(function () {
        moveAmm < 480 ? moveAmm += 160 : moveAmm = 0;
        bgAmm == 81 ? bgAmm = 201 : bgAmm -= 40;
        $('#slider-ul').css('top', '-' + moveAmm + "px");
        $('#slider-nav').css('background', 'url(http://dev.learningpeople.co.uk/imgs/entry-it/slider-nav.png) repeat-y 0 -' + bgAmm + 'px');
    }, 3000);

DEMO

Upvotes: 1

Related Questions