mui 轮播图

效果

054A7291-2044-4F6E-B153-42DCC326B3F1.png

代码

<!--轮播图-->
            <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="../images/bg 2.png" style="width: 100%;height: 200px;"/>
                        </a>
                    </div>  
                    
                     <div class="mui-slider-item">
                         <a href="#">
                             <img src="../images/2.png" style="width: 100%;height: 200px;"/>
                         </a>
                     </div>
                     <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/bg 2.png" style="width: 100%;height: 200px;"/>
                        </a>
                    </div>
                    
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate">
                         <a href="#">
                             <img src="../images/2.png" style="width: 100%;height: 200px;"/>
                         </a>
                     </div>
                </div>
                
                <!--显示圆点-->
                <div class="mui-slider-indicator">
                     <div class="mui-indicator mui-active"></div>
                     <div class="mui-indicator"></div>
                </div>
            </div>

设置自动播放周期

//获得slider插件对象
                var gallery = mui('.mui-slider');
                     gallery.slider({
                     interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
                });

获取当前索引

document.querySelector('.mui-slider').addEventListener('slide',function(event){
                //注意slideNumber是从0开始的
                console.log("你正在看第"+(event.detail.slideNumber+1)+"张图片")         
});         

点击时获取不到索引,不知道为啥

document.querySelector('.mui-slider').addEventListener('tap',function(event){
                console.log(event.detail.slideNumber)           
});