CODEWITHSUNDEEP
javascriptjqueryhtml
NineCattoRules
NineCattoRules

Reputation: 2428

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

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();
    }
}

Upvotes: 0

Views: 1984

Answers (3)

Radio
Radio

Reputation: 2853

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.

Upvotes: 2

Simon
Simon

Reputation: 296

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

Upvotes: 1

Radio
Radio

Reputation: 2853

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);
}

Upvotes: 1

Related Questions