Unslider – 輕量的響應式 jQuery 內容滑塊插件

引入所需的js文件

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

 html結構

<div class="banner">

    <ul>

        <li>This is a slide.</li>

        <li>This is another slide.</li>

        <li>This is a final slide.</li>

    </ul>

</div>

　使用 CSS 美化外觀

    

.banner { position: relative; overflow: auto; }

    .banner li { list-style: none; }

        .banner ul li { float: left; }

 最後就是調用插件
 

$('.banner').unslider({

    speed: 500,               //  滾動速度

    delay: 3000,              //  動畫延遲

    complete: function() {},  //  動畫完成的回調函數

    keys: true,               //  啓動鍵盤導航

    dots: true,               //  顯示點導航

    fluid: false              //  支持響應式設計

});