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小时内删除。
发表评论