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

　　Unslider 是一款非常輕量的 jQuery 插件（壓縮后只有 1KB），能夠用於任何 HTML 內容的滑動。可以響應容器的大小變化，自動排布不用大小的滑塊。可以通過整合 jQuery.event.swipe 來讓其支持觸屏設備的滑動功能。

您可能感興趣的相關文章

• 推薦20個另類的單頁網站作品設計案例
• 10套精美的免費網站后台管理系統模板
• 2012年最佳的25個響應式網站設計作品
• 25個國外優秀的電子商務網站設計案例
• 12個優秀的 HTML5 網站設計案例欣賞

 

 

效果演示      插件下載

 

使用方法：

　　引入 jQuery 和 Unslider：

<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              //  支持響應式設計
});

　　

您可能感興趣的相關文章

• 期待已久的2012年度最佳 jQuery 插件揭曉
• 精心挑選的優秀jQuery Ajax分頁插件和教程
• 推薦幾款非常棒的 jQuery 全景圖片展示插件
• 12款經典的白富美型 jQuery 圖片輪播插件
• 精心挑選優秀的 JavaScript 日歷和時間插件

 

本文鏈接：Unslider – 輕量的響應式 jQuery 內容滑塊插件

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源