Swiper轮播图在vue中的使用

使用Swiper插件实现轮播图

1.安装Swiper插件

使用npm i swiper 或者 yarn add swiper 安装依赖包
在入口文件引入swiper样式
import “swiper/css/swiper.css”;

2.使用swiper

在需要使用swiper的组件引入swiper包
import Swiper from “swiper”;

然后在该组件中需要展示轮播图的地方插入以下代码

 <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/1.jpg" /></div>
        <div class="swiper-slide"><img src="./images/2.jpg" /></div>
        <div class="swiper-slide"><img src="./images/3.jpg" /></div>
        <div class="swiper-slide"><img src="./images/4.jpg" /></div>
        <div class="swiper-slide"><img src="./images/5.jpg" /></div>
        <div class="swiper-slide"><img src="./images/6.jpg" /></div>
      </div>

      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-pagination"></div>

      <!-- 前进后退按钮 -->
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>

export default {
	mounted() {
    	const swiper = new Swiper(".swiper", {
		      loop: true, //开启之后会无限循环，如果不开启，当从最后一张图到第一张图的切换效果时往前的。
		      autoplay: true, //可选选项，自动滑动，默认每张图展示三秒
		      // autoplay:{delay:5000}, //这种写法可以改变图片展示时间为5秒
		      initialSlide: 1, //设置进入页面时，第一次展示的图片，默认为0
		      // direction: "vertical", //设置横向滑动还是竖向滑动,默认为horizontal 横向
		      speed: 300, //设置滑动时速度，即从开始滑动到滑动结束的时间
		      grabCursor: true, //设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。
		      mousewheel: true, //开启鼠标滚轮切换图片
		      keyboard: true, //开启使用键盘方向键切换图片
		
		      //分页器设置
		      pagination: {
		        el: ".swiper-pagination", //分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，
		        type: "bullets", //分页器样式类型，可选 1.‘bullets’  圆点（默认） 2.‘fraction’  分式  3.‘progressbar’  进度条 4.‘custom’ 自定义
		      },
		
		      //前进后退按钮设置
		      navigation: {
		        nextEl: ".swiper-button-next",
		        prevEl: ".swiper-button-prev",
		      },
		    });
  },
}

需要使用的功能直接添加相应的设置即可，需要其他功能可以参考swiper官方文档