I was making a product slider for a clients website; and was using the CSS-Tricks Moving Boxes slider. I chose this slider because it had an effect that most other jQuery sliders don’t have, the main image is larger than the images leaving or entering the screen.
The one problem I found with it was that there is no setting for autoplay, so the user always needs to manually press the arrow to navigate to the next photo. I wanted it to autoplay, so it starts to play as soon as you load the webpage. I found the code to make this work however, check out the demo to see the slider autoplay, and keep reading for the code / instructions.
View Demo
All you need to do to set the Moving Boxes jQuery slider to autoplay is add the following code right after line 110 in the slider.js file:
if (curPanel == totalPanels)
{
}
else
{
$('.right').click();
}
} ,6000 );
So the above code goes right after the line: $(“.left”).click(function(){ change(false); });
Change the number to adjust the time of delay, and it will autoplay all the way to the end of the slider.
No Responses to “Set the jQuery Moving Boxes Slider to Autoplay”
Trackbacks/Pingbacks