Swiper简介
swiper中文网
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
在vue应用中使用swiper
1.下载插件并且保存到依赖
npm install --save swiper
2.在需要使用的vue组件中引入
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
3.页面结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
导航等组件可以放在container之外
4.JS部分
JS部分写在vue实例的mounted生命周期函数中
mounted () { //创建一个Swiper实例对象,来实现轮播 new Swiper('.swiper-container',{ loop: true, //可以循环轮播 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, }) }