Adding autoplay + prev&next buttons to slider

Question

im using the slider explained in codrops tutorial http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/comment-page-2/#comment-458990 .

It uses a simple ordered list to display the slides:

<div class="slideshow" id="slideshow">
  <ol class="slides">
    <li class="current">
      <div class="description">
        <h2>Slide 1 Title</h2>
        <p>Slide 1 content</p>
      </div>
      <div class="tiltview col">
        <a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
        <a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
      </div>
    </li>
    <li>
      <div class="description">
        <h2>Slide 2 title</h2>
        <p>Slide 2 content</p>
      </div>
      <div class="tiltview row">
        <a href="http://pexcil.com/"><img src="img/3_mobile.jpg"/></a>
        <a href="http://foodsense.is/"><img src="img/4_mobile.jpg"/></a>
      </div>
    </li>
  </ol>
</div><!-- /slideshow -->

Then a navigation is created using javascript, this navigation display a set of that when clicked they display the slides:

TiltSlider.prototype._addNavigation = function() {
// add nav "dots"
this.nav = document.createElement( 'nav' )
var inner = '';
for( var i = 0; i < this.itemsCount; ++i ) {
    inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
}
this.nav.innerHTML = inner;
this.el.appendChild( this.nav );
this.navDots = [].slice.call( this.nav.children );

}

TiltSlider.prototype._initEvents = function() {
var self = this;
// show a new item when clicking the navigation "dots"
this.navDots.forEach( function( dot, idx ) {
    dot.addEventListener( 'click', function() {
        if( idx !== self.current ) {
            self._showItem( idx );
        }
    } );
} );

}

It all works fine but does anybody have any idea of how could I add autoplay and prev&next buttons to this slider??

Answer 1

You can create the autoplay function manually by using jquery. My code will call the each slide after 10 seconds. (ie) the next slider will called after 10 seconds

$(document).ready(function(){
        new TiltSlider( document.getElementById( 'slideshow' ) );               
        window.setInterval(function(){              
            $('nav>.current').next().trigger('click');
            if($('nav > .current').next().index() == '-1'){
                $('nav > span').trigger('click');
            }               
        }, 10000);

        });