vue中swiper使用

vue2使用

安装

在vue中使用 首先 npm install --save swiper@5 // 安装低版本的最好，这里装5.x

 npm install --save swiper@5 

使用

安装结束后，直接复制下面代码。哪里需要放哪里，组件直接用就好了

<template>
  <div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
        </div>
      </div>
      //换页器
      <div class="swiper-pagination"></div>
    //如果需要导航按钮 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
	//如果需要滚动条 
    <div class="swiper-scrollbar"></div>
    </div>
  </div>
</template>
 
<script>
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
export default {
  name: "Swiper",
  data() {
    return {
      imgs: [
        { pic: require("../assets/img/dy.jpg") },
        { pic: require("../assets/img/dy.jpg") },
        { pic: require("../assets/img/dy.jpg") },
      ],
    };
  },
  mounted() {
    var mySwiper = new Swiper("#swiperIndex", {
      //配置分页器内容
      direction: "vertical", //horizontal 水平方向//"vertical" 垂直方向,
      mousewheel: true,
      loop: true, // 循环模式选项
      pagination: {
        el: ".swiper-pagination", //换页器与哪个标签关联
        clickable: true, //分页器是否可以点击
      },
        // 如果需要前进后退按钮
    	navigation: {
      		nextEl: '.swiper-button-next',
      		prevEl: '.swiper-button-prev',
    	},
    
    	// 如果需要滚动条
    	scrollbar: {
      		el: '.swiper-scrollbar',
   		 },
 
 
    });
  },
};
</script>
 
<style >
.swiper-container {
  width: 80%;
  height: 400px;
  border-radius: 0.1rem;
}
.swiper-slide img {
  width: 100%;
}
.swiper-pagination-bullet {
  background-color: white;
}
.swiper-pagination-bullet-active {
  background-color: orangered;
}
</style>

vue3使用

安装

npm install swiper --save

引入 在使用的页面引入

import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/swiper.css'

使用

 <swiper :slides-per-view="auto" :scrollbar="{ draggable: true }">
          <swiper-slide>1</swiper-slide>
          <swiper-slide>1</swiper-slide>
          <swiper-slide>1</swiper-slide>
 </swiper> //slides-per-view="auto" 表示显示几张图片

可配置参数

参数介绍：
modules：
loop： 是否循环播放
slides-per-view：控制一次显示几张轮播图
space-between： 每张轮播图之间的距离，该属性不可以和margin 属性同时使用；
autoplay： 是否自动轮播， delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放， 设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。
navigation： 定义左右切换箭头
pagination： 控制是否可以点击圆点指示器切换轮播
scrollbar： 是否显示轮播图的滚动条， draggable设置为 true就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）