添加自動播放+先前＆下按鈕滑塊

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

     });