How could I automate a JavaScript function to autoplay a slideshow?

Question

I have a div box gallery with some pictures on background and 2 lateral buttons prev and next. On click of a button the JavaScript show the next or previous picture, that's ok but I wish also to make this transition automatic using an interval time to show the next picture. How can I proceed? This is my HTML:

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

This is my JavaScript function:

// goto next or previous slide
BoxesFx.prototype._navigate = function( dir ) {
    if( this.isAnimating ) return false;
    this.isAnimating = true;

    var self = this, currentPanel = this.panels[ this.current ];

    if( dir === 'next' ) {
        this.current = this.current < this.panelsCount - 1 ? this.current + 1 : 0;          
    }
    else {
        this.current = this.current > 0 ? this.current - 1 : this.panelsCount - 1;
    }

    // next panel to be shown
    var nextPanel = this.panels[ this.current ];
    // add class active to the next panel to trigger its animation
    classie.add( nextPanel, 'active' );
    // apply the transforms to the current panel
    this._applyTransforms( currentPanel, dir );

    // let´s track the number of transitions ended per panel
    var cntTransTotal = 0,

        // transition end event function
        onEndTransitionFn = function( ev ) {
            if( ev && !classie.has( ev.target, 'bg-img' ) ) return false;

            // return if not all panel transitions ended
            ++cntTransTotal;
            if( cntTransTotal < self.panelsCount ) return false;

            if( support.transitions ) {
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }

            // remove current class from current panel and add it to the next one
            classie.remove( currentPanel, 'current' );
            classie.add( nextPanel, 'current' );
            // reset transforms for the currentPanel
            self._resetTransforms( currentPanel );
            // remove class active
            classie.remove( nextPanel, 'active' );
            self.isAnimating = false;
        };

    if( support.transitions ) {
        currentPanel.addEventListener( transEndEventName, onEndTransitionFn );
    }
    else {
        onEndTransitionFn();
    }
}

Radio · Accepted Answer · 2015-02-27T16:36:37.943

Ok I looked up BoxesFx. look for this code:

BoxesFx.prototype._initEvents = function() {
    var self = this, navctrls = this.nav.children;
    // previous action
    navctrls[0].addEventListener( 'click', function() { self._navigate('prev') } );
    // next action
    navctrls[1].addEventListener( 'click', function() { self._navigate('next') } );
    // window resize
    window.addEventListener( 'resize', function() { self._resizeHandler(); } );
}

Change it to:

BoxesFx.prototype._initEvents = function() {
    var self = this, navctrls = this.nav.children;
    // previous action
    navctrls[0].addEventListener( 'click', function() { self.automate('prev',3000) } );
    // next action
    navctrls[1].addEventListener( 'click', function() { self.automate('next',3000) } );
    // window resize
    window.addEventListener( 'resize', function() { self._resizeHandler(); } );
    window.onload = function () {
      self.automate('next',3000);
    }
}

Where "3000" is the milliseconds to show a slide, including any animation time of the slide.

It doesn't start the autoplay, and when I click on my arrow I get an error: Uncaught TypeError: undefined is not a function. I think the error is normal (cause we change the code) but why it doesn't autoplay? — NineCattoRules, Feb 27 '15 at 16:34
I added the code to autostart to the example. I don't know why the function is undefined unless you didn't add the BoxesFx additions in the first answer. — Radio, Feb 27 '15 at 16:39
indeed before I did remove those lines...back it in place and now it works! Thank you very much! — NineCattoRules, Feb 27 '15 at 16:44

Simon · Answer 2 · 2015-02-27T16:26:39.857

1

You can use javascripts setInterval() function:

http://www.w3schools.com/jsref/met_win_setinterval.asp

Edit:

You will have to call the setInterval() function when your page has loaded. For example you could use the onload-Event of your body tag:

HTML

<body onload="startAutoplay()">
  // your slider and content
</body>

Javascript

function startAutoplay(){
  setInterval(function(){ 
    // call your next() or previous() function here
 }, 3000);
}

This will set the timer to 3 seconds

edited Feb 27 '15 at 16:26

answered Feb 27 '15 at 15:30

Simon

296
4
17

I wish to start automatically the slideshow without press any button – NineCattoRules Feb 27 '15 at 16:12
1

I edited my answert. You will have to set the timer when the page has loaded. – Simon Feb 27 '15 at 16:27

Radio · Answer 3 · 2015-02-27T15:56:49.490

1

just add a couple more methods, make new buttons to call them. the property "auto" will not be zero when it's running, which may be handy later.

BoxesFx.prototype.auto = 0;
BoxesFx.prototype.automate = function(dir,time){
    var scope = this;
    this.auto = setInterval(function(){
        scope._navigate(dir);
    },time);
}
BoxesFx.prototype.stopAutomate = function(){
    clearInterval(this.auto);
}

edited Feb 27 '15 at 15:56

answered Feb 27 '15 at 15:30

Radio

2,810
1
21
43

thanks for the reply. There is an error it's BoxesFx not BoxesFX...could I see the code for new buttons? It's not very clear to me – NineCattoRules Feb 27 '15 at 15:49
I fixed the error in the sample. A button will depend on the framework being used, if one is being used at all. You would add buttons to your webpage using traditional methods and you can assign a click event. – Radio Feb 27 '15 at 15:57
See this stackoverflow for an exmaple click event with pure JS http://stackoverflow.com/questions/2199949/add-event-to-button-with-javascript – Radio Feb 27 '15 at 15:58
for this project I don't have any framework, but I don't understand this: why should I make buttons? I wish to have a carousel that starts and play automatically – NineCattoRules Feb 27 '15 at 16:10
Ah. Well then, whatever is calling the _navigate method will. Need to call the automate function instead. – Radio Feb 27 '15 at 16:18
I added a second answer which will change your nav controls to automate the playback. – Radio Feb 27 '15 at 16:25

How could I automate a JavaScript function to autoplay a slideshow?

3 Answers3