mui 圖片輪播

mui 圖片輪播

PS:mui.css&mui.js自行解決

<style>
.mui-plus.mui-android header.mui-bar{
    display: none;
}
.mui-plus.mui-android .mui-bar-nav~.mui-content{
    padding: 0;
}
</style>

<!--主體-->
<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">下方懸浮標題</h1>
        </header>
        <div class="mui-content">
            <ul class="mui-table-view mui-table-view-chevron">
                <li id="switch" class="mui-table-view-cell">
                    定時輪播
                    <div class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ul>
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 額外增加的一個節點(循環輪播：第一個節點是最後一張輪播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/yuantiao.jpg">
                            <p class="mui-slider-title">靜靜看這世界</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡覺</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/muwu.jpg">
                            <p class="mui-slider-title">想要一間這樣的木屋，靜靜的喝咖啡</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/cbd.jpg">
                            <p class="mui-slider-title">Color of SIP CBD</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/yuantiao.jpg">
                            <p class="mui-slider-title">靜靜看這世界</p>
                        </a>
                    </div>
                    <!-- 額外增加的一個節點(循環輪播：最後一個節點是第一張輪播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡覺</p>
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator mui-text-right">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>

//使用方法
<script>
        mui.init({
            swipeBack:true //啓用右滑關閉功能
        });
        var slider = mui("#slider");
        document.getElementById("switch").addEventListener('toggle', function(e) {
            if (e.detail.isActive) {
                slider.slider({
                    interval: 5000
                });
            } else {
                slider.slider({
                    interval: 0
                });
            }
        });
    </script>