mui 之 轮播图

说明

代码块：mslider

官方文档：https://dev.dcloud.net.cn/mui/ui/#gallery

基本代码块

不能循环轮播

<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>

循环轮播

<!-- 轮播图 -->
<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/4.jpg"></a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
            <a href="#"><img src="./images/1.jpg"></a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
            <a href="#"><img src="./images/2.jpg"></a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
            <a href="#"><img src="./images/3.jpg"></a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
            <a href="#"><img src="./images/4.jpg"></a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="./images/1.jpg"></a>
        </div>
    </div>
    <!-- 指示点 -->
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>