按钮和图片切换的代码

<!-- xxx.hml -->
<div class="container">
    <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false">
        <div class = "swiperContent" >
            <text class = "text" value="First screen"></text>
        </div>
        <div class = "swiperContent">
            <text class = "text" value="Second screen"></text>
        </div>
        <div class = "swiperContent">
            <text class = "text" value="Third screen"></text>
        </div>
    </swiper>
    <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input>
    <input class="button" type="button" value="showNext" onclick="showNext"></input>
    <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
</div>

/* xxx.css */
.container {
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
}
.swiper {
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 70%;
    height: 130px;
    border: 1px solid #000000;
    indicator-color: #cf2411;
    indicator-size: 14px;
    indicator-bottom: 20px;
    indicator-right: 30px;
    margin-top: 100px;
}
.swiperContent {
    height: 100%;
    justify-content: center;
}
.button {
    width: 70%;
    margin: 10px;
}
.text {
    font-size: 40px;
}

// xxx.js
export default {
    swipeTo(e) {
        this.$element('swiper').swipeTo({index: 2});
    },
    showNext(type) {
        this.$element('swiper').showNext();
    },
    showPrevious(e) {
        this.$element('swiper').showPrevious();
    }
}