如何在紅帽子模板中添加自動幻燈片

Question

您好我已經下載並應用了紅帽模板（Red Hood)在我的博客中，但是我發現滑塊不會自動隨着定時器滑動，這是紅色的引擎蓋滑塊代碼..

<!-- slider --> 

    <div class='slider-container'> 

    <ul id='slider'> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li> 
    </ul> 

    </div><!-- /slider --> 

我只是編輯以

頭元素 - 我說 -

<script> 
    jQuery(document).ready(function() { 
    jQuery('.fp-slides').cycle({ 
    fx: 'fade', 
    timeout: 4000, 
    delay: 0, 
    speed: 1000, 
    next: '.slidesjs-next', 
    prev: '.slidesjs-previous', 

    continuous: 0, 
    sync: 1, 
    pause: 1, 
    pauseOnPagerHover: 1, 
    cleartype: true, 
    cleartypeNoBg: true 
}); 
}); 
    </script> 

而且還身體改變滑塊碼 -

<!-- slider --> 
    <div class='slider-container'> 
    <div class='fp-slides'> 
    <ul id='slider'> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/7.jpg'/></a></li> 
    <li><a href='#'><img src='http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/8.jpg'/></a></li> 
    </ul> 
    </div> 
    </div><!-- /slider --> 

但結果沒有變化！如果我錯了或錯過了自動滑動的東西，請幫助我獲得結果。預先感謝大家對我的問題感興趣。我是HTML編程新手。

Answer 1

我查看了給定的紅色敞篷模板鏈接，並使用開發人員工具瞭解了哪個插件用於滑塊。

請注意，您需要查找應用於滑塊HTML代碼的任何HTML元素的腳本。事實證明，該模板在ticker模式下使用boxslider插件。

下面是顯示此示例的鏈接：boxslider ticker mode