触摸滑动插件Swiper的使用_windows触屏(一体机)设备 前端滑动组件

npm安装 npm install swiper --save-dev

在使用的页面引入swiper

import Swiper from 'swiper'

1、准备一个容器

<div class="swiper-container" id="mySwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) in bannerList" :key="item.id">
				<img :src="item.imgUrl"/>
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
		
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
</div>

2、js区域

new Swiper ('.swiper-container', {
                                loop: true, // 循环模式选项
                                // 如果需要分页器
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable:true
                                },
                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
})