swiper7-33.添加函数开启监听轮播图的各种事件（点击，滑
动...）
1<template>
2<div class="swiper mySwiper">
3<div class="swiper-wrapper">
4<div class="swiper-slide">Slide 1</div>
5<div class="swiper-slide">Slide 2</div>
6<div class="swiper-slide">Slide 3</div>
7<div class="swiper-slide">Slide 4</div>
8<div class="swiper-slide">Slide 5</div>
9<div class="swiper-slide">Slide 6</div>
10<div class="swiper-slide">Slide 7</div>
11<div class="swiper-slide">Slide 8</div>
12<div class="swiper-slide">Slide 9</div>
13<div class="swiper-slide">Slide 10</div>
14</div>
15<!-- Add Pagination -->
16<div class="swiper-pagination"></div>
17<!-- Add Navigation -->
18<div class="swiper-button-prev"></div>
19<div class="swiper-button-next"></div>
20<!-- 添加函数开启监听轮播图的各种事件(点击，滑动...) -->
21</div>
22</template>
23<script>
24 import Swiper from "swiper/swiper-bundle.min.js";
25 import "swiper/swiper-bundle.min.css";
26
27 export default {
28  components: {},
29  methods: {
30    myPlugin({ swiper, extendParams, on }) {
31      extendParams({
32debugger: false,
33      });
34
35      on("init", () => {
36if (!swiper.params.debugger) return;
37        console.log("init");
38      });
39      on("click", (swiper, e) => {
40if (!swiper.params.debugger) return;
41        console.log("click");
42      });
43      on("tap", (swiper, e) => {
44if (!swiper.params.debugger) return;
45        console.log("tap");
46      });
47      on("doubleTap", (swiper, e) => {
48if (!swiper.params.debugger) return;
49        console.log("doubleTap");
50      });
js实现轮播图最简代码
51      on("sliderMove", (swiper, e) => {
52if (!swiper.params.debugger) return;
53        console.log("sliderMove");
54      });
55      on("slideChange", () => {
56if (!swiper.params.debugger) return;
57        console.log(
58          "slideChange",
59          swiper.previousIndex,
60          "->",
61          swiper.activeIndex
62        );
63      });
64      on("slideChangeTransitionStart", () => {
65if (!swiper.params.debugger) return;
66        console.log("slideChangeTransitionStart");
67      });
68      on("slideChangeTransitionEnd", () => {
69if (!swiper.params.debugger) return;
70        console.log("slideChangeTransitionEnd");
71      });
72      on("transitionStart", () => {
73if (!swiper.params.debugger) return;
74        console.log("transitionStart");
75      });
76      on("transitionEnd", () => {
77if (!swiper.params.debugger) return;
78        console.log("transitionEnd");
79      });
80      on("fromEdge", () => {
81if (!swiper.params.debugger) return;
82        console.log("fromEdge");
83      });
84      on("reachBeginning", () => {
85if (!swiper.params.debugger) return;
86        console.log("reachBeginning");
87      });
88      on("reachEnd", () => {
89if (!swiper.params.debugger) return;
90        console.log("reachEnd");
91      });
92    },
93  },
94  mounted() {
95this.$nextTick(() => {
96// 创建swiper对象
97var swiper = new Swiper(".mySwiper", {
98        modules: [Plugin],
99        pagination: {
100          el: ".swiper-pagination",
101          clickable: true,
102        },
103        navigation: {
104          nextEl: ".swiper-button-next",
105          prevEl: ".swiper-button-prev",
106        },
107// Enable debugger
108debugger: true,
109      });
110    });
111  },
112 };
113</script>
114
115<style lang="scss" scoped>
116.swiper {
117  width: 100%;
118  height: 500px;
119 }
120
121.swiper-slide {
122  text-align: center;
123  font-size: 18px;
124  background: #fff;
125
126/* Center slide text vertically */
127  display: -webkit-box;
128  display: -ms-flexbox;
129  display: -webkit-flex;
130  display: flex;
131  -webkit-box-pack: center;
132  -ms-flex-pack: center;
133  -webkit-justify-content: center;
134  justify-content: center;
135  -webkit-box-align: center;
136  -ms-flex-align: center;
137  -webkit-align-items: center;
138  align-items: center;
139 }
140</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。