添加自动播放+先前＆下按钮滑块

Question

IM使用滑块codrops教程http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/comment-page-2/#comment-458990说明。

它使用一个简单的命令列表中显示的幻灯片：

<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 --> 

然后使用JavaScript，这个导航显示一组创建导航单击时显示的幻灯片：

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

}

这一切工作正常，但没有任何人有我怎么可以添加自动播放和prev &下一个按钮，滑块什么想法？

Answer 1

您可以通过使用jQuery手动创建自动播放功能。我的代码将在10秒后调用每张幻灯片。 （即）下一个滑块将在10秒后调用

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

     });