Auto Sliding / Slideshow

[titynakrani]

How to make the slider auto sliding??

[Mottie]

Hi titynakrani!

It's not built into MovingBoxes, but you can easily add a slideshow using the following code (demo):

HTML

<!-- Replace this with a link or whatever, but you'll need to modify the code -->
<button class="slideshow">Play</button>

Script

// Make MovingBoxes Slideshow
$(window).load(function(){
    var slideShowDelay = 4000, // 4000 millisecond = 4 seconds
        timer,
        mb = $('#slider').data('movingBoxes'),
        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;
            }
            // next slide, use mb.goBack(); to reverse direction
            mb.goForward();
            // run loop again
            timer = setTimeout(function(){
                loop();
            }, slideShowDelay);
        };
    // toggle slideshow button
    // if you replace this with a link "<a>" then un-comment out
    // the "return false" at the bottom ( remove the // )
    $('.slideshow')
        .attr('data-mode', "false") // slideshow paused
        .click(function(){
            clearTimeout(timer);
            // slide show mode
            var mode = $(this).attr('data-mode') === "false",
                // button text, replace with <img> if desired
                button = mode ? "Pause" : "Play";
            if (mode) {
                loop();
            }
            $(this).attr('data-mode', mode).html(button);
            // return false;
        });
});

The above slideshow code will play a MovingBoxes with the wrap option set to true, forever; and stop the slideshow at the last slide if the wrap option is false.

[invisiblemx]

Hi, I can't make this AUTOplay with this code, but I added this in jquery.movingboxes.js in line 55 (more or less), the code is it:

51          base.$right = base.$wrap.find('.mb-right').click(function(){
52              base.goForward();
53              return false;
54          });

55          //AUTOPLAY
56          setInterval( function(){
57          if (base.curPanel == base.totalPanels)
58          {}
59          else
60          {$('.mb-right').click();}} ,6000 );

I hope to serve you

Regards!!!

Jesus Gonzalez http://www.LiquidoWeb.com

[yashu1901]

hey can u tell me what change I have to make for this to auto slide when the document is loaded....... I dont want to use button as trigger....

[Mottie]

Hi @yashu1901!

This may not be the best method, but it works... demo

Just call the toggleShow() function to start or stop the slideshow.

var toggleShow;

$(window).load(function() {
    // Make MovingBoxes Slideshow
    var slideShowDelay = 4000,
        // 4000 millisecond = 4 seconds
        playing = false,
        timer, mb = $('#slider').data('movingBoxes'),
        loop = function() {
            // if wrap is true, check for last slide, then stop slideshow
            if (mb.options.wrap !== true && mb.curPanel >= mb.totalPanels) {
                playing = false;
                // stop the loop
                return;
            }
            // next slide, use mb.goBack(); to reverse direction
            mb.goForward();
            // run loop again
            timer = setTimeout(function() {
                loop();
            }, slideShowDelay);
        };
    // toggle slideshow
    toggleShow = function() {
        if (playing) {
            clearInterval(timer);
        } else {
            loop();
        }
        playing = !playing;
    };
});

// Initialize MovingBoxes
$('#slider').movingBoxes({
    initialized: function(e, slider, tar) {
        // start the slideshow after initialization has completed
        toggleShow();
    }
});​

[yashu1901]

hey thank you...... the code is working fine...........:)

[JDSG]

Hi,

I'm trying to used moving box on my website. I downloaded all files with slider.js. Everything working fine and now I want that slider to run continuously. Can you please advise what I need to do. I already tried the code mentioned in above comment but it didn't work. Please help.

Regards, Jazz

[Mottie]

Hi JDSG!

Are you getting any errors? I'm not sure I understand what slider.js has to do with MovingBoxes, are they being uses together? Could you share a link to your site or make a demo so I can better help you find the problem.

On another note, I think there has been enough interest in adding a slideshow to MovingBoxes that I'm going to work on adding it soon. No promise on when as I'm still very busy.

[JDSG]

Hi Mottie,

I'm using your latest version of Moving Boxes V2.1.1 There is no any error. When I reached at my last images then it moves to first one. But I want to run all images in loop. I tried with wrap:true but no success.

[Mottie]

Hi JDSG!

I changed this demo to wrap: true and it seems to work.

[yusufhandian]

Thanks you, Worked