Moving box auto scroll and loop

[thakkermukund]

https://css-tricks.com/moving-boxes/

Its’ great. But how do i move images automatically in infinite loop.

I am using slider.js and jquery-1.3.1.min.js

any change in js?

[philbert]

I’m in need of the same thing. I’m trying to work through the code on the anything slider in order to add it to the moving boxes but I’m a newbie at jquery and I can’t seem to figure it out. Any help would be great.

[PeppezZ]

i need the same option too

[biliards]

Hi all!

I have got the same problem of thakkermukund. I used https://css-tricks.com/examples/MovingBoxes/js/slider.js, I modified https://css-tricks.com/examples/MovingBo … /style.css and I create my gallery in https://www.leadhouse.net/

I would like a circular gallery so that:
* when I show last image, I would like load first image on the right-hand side of last image. if I click right button, then I would like load second image, and so on
* when I show first image, and I click left button, then I would like load last image. and if I click again left button, then I would like load next to last image, and son on

is it possible with this gallery?

[qnstner]

Im looking for the same loop. I love moving boxes. Is this possible Chris?

[Chris Coyier]

The AnythingSlider has "infinite" and "autoscroll"

https://css-tricks.com/anythingslider-jquery-plugin/

Maybe you can either adapt that to your needs, or dissect what is going on there and implement it into the moving boxes design.

[tscflorida]

can anyone help me to update moving box script into a very similar script from http://www.imobiliare.ro ???

[Historical Forums User]

I added the following to the original jquery.movingboxes.js file in line 126:

setInterval( function() {$(‘.mb-right’).click();}, 5000 );

It seems to work fine, but unfortunately I always got a blue border around links (text and image links…). Tried to set border to 0/none in html and css but´s still there.
Any idea about that?

[Historical Forums User]

okay, my bad… added the pseudoclass a:focus { outline: none; } into the css-file.
Et voila. Autoplay, looping and NO ugly blue border…

[chubert]

the script is awesome… absinth>>how did you manage to make it loop? thanks for your help

[odonnetp]

Any update on this question? I see that you are able to have the boxes loop (as seen in the change log Version 2.2 for the “wrap” option – https://github.com/chriscoyier/MovingBoxes). But, has anyone figured out a way for the boxes to slide automatically say every 3-5 seconds without the user having to click the right arrow? That would be a nice feature as well. Any help would be greatly appreciated!

[Mottie]

Hi odonnetp!

I made a demo with some code that interacts with MovingBoxes to make it into a slideshow: http://jsfiddle.net/Mottie/jMXx3/94/

I haven’t integrated it into the plugin because I’m trying to decide if it should be an extension or added to the plugin core.

[odonnetp]

Hi Mottie,

thanks for the link. It looks great. Would be nice though if it just started automatically. Any way to have it start automatically without having someone needing to click “Play”.

Thanks!

[Mottie]

Just add the following to the initialization code:

initialized: function(e, slider, tar){

$('button.slideshow').trigger('click');

},

and here is an updated demo.

And, if you want it to play forever, just remove this from the loop function:

// if wrap is true, check for last slide, then stop slideshow

if (mb.options.wrap !== true && mb.curPanel >= mb.totalPanels){

// click the button to pause

$('button.slideshow').trigger('click');

return;

}

[odonnetp]

Perfect! looks like just what we could use. Thank you!

[Author]

Posts