Grow your CSS skills. Land your dream job.

Moving box auto scroll and loop

  • # December 17, 2009 at 12:53 am

    http://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?

    # February 2, 2010 at 5:39 pm

    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.

    # March 5, 2010 at 1:30 pm

    i need the same option too

    # April 6, 2010 at 10:27 am

    Hi all!

    I have got the same problem of thakkermukund. I used http://css-tricks.com/examples/MovingBoxes/js/slider.js, I modified http://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?

    # April 7, 2010 at 5:57 am

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

    # April 7, 2010 at 9:37 am

    The AnythingSlider has "infinite" and "autoscroll"

    http://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.

    # September 25, 2010 at 5:58 am

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

    # March 21, 2011 at 11:38 am

    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?

    # March 21, 2011 at 3:22 pm

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

    # March 27, 2011 at 3:15 am

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

    # January 30, 2012 at 6:18 pm

    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!

    # January 30, 2012 at 8:42 pm

    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.

    # February 3, 2012 at 3:52 pm

    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!

    # February 3, 2012 at 5:56 pm

    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;
    }
    # February 8, 2012 at 3:22 pm

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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".