CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Owais Ahmed
Owais Ahmed

Reputation: 1438

Making css auto slider

I found this 3D cube animation slider. The problem with this slider is that it needs to click to see the next picture. I want auto silder. All the 4 images should slide automatically and when the image is 4 then the next image will be image 1 again.

$("#controls").on('click', 'span', function(){
    $(".cubeSpinner").css("transform","rotateY("+($(this).index() * -90)+"deg)");
});

I am new to programming. Can anyone help me how to customize this make it auto slider without clicking the images?

Upvotes: 1

Views: 293

Answers (2)

Sujata Chanda
Sujata Chanda

Reputation: 3395

Another way is to trigger click.

var count=0;
    var len = $('#controls span').length;

    setInterval(function(){
        if(count === len){
            count = 0;
        }
        $('#controls span').eq(count).trigger('click');
        count++;
    }, 5000);

Fiddle

Upvotes: 0

Eric Guan
Eric Guan

Reputation: 15992

Try this.

http://jsfiddle.net/K99GS/21/

Change your javascript to this.

var index = 0;
setInterval(function(){
    if(index==3)
        index = 0;
    $(".cubeSpinner").css("transform","rotateY("+(index * -90)+"deg)");
    index++;
},1500);

Upvotes: 2

Related Questions