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就可以拖动底部的滚动条(轮播当中,一般不怎么会使用到这个属性)