mui框架內置了圖片輪播插件，通過該插件封裝的JS API，用戶可以設定是否自動輪播及輪播周期，如下為代碼示例：
//獲得slider插件對象
var gallery = mui('.mui-slider');gallery.slider({
interval:5000//自動輪播周期，若為0則不自動播放，默認為0；});
因此若希望圖片輪播不要自動播放，而是用戶手動滑動才切換，只需要通過如上方法，將slideshowDelay參數設為0即可。
若要跳轉到第x張圖片，則可以使用圖片輪播插件的gotoItem方法，例如：
//獲得slider插件對象
var gallery = mui('.mui-slider');gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；
圖片輪播涉及的另外一個問題：是否支持循環播放，比如有1、2、3、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：
· 支持循環：左滑，直接切換到第1張圖片；
· 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；
當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是同樣問題；這個問題的實現需要通過.mui-slider-loop類及DOM節點來控制；若不支持循環，代碼比較簡單，如下：
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
</div></div>
若要支持循環，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重復增加2張圖片，圖片順序變為：4、1、2、3、4、1，代碼示例如下：
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循環，需要重復圖片節點-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
<!--支持循環，需要重復圖片節點-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
</div></div>
注意：mui框架會默認初始化當前頁面的圖片輪播組件；若輪播組件內容為js動態生成時（比如通過ajax動態獲取的營銷信息），則需要在動態DOM生成后，手動調用圖片輪播的初始化方法；代碼如下：
//獲得slider插件對象var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自動輪播周期，若為0則不自動播放，默認為0；});