1 <template>
2 <div class="swiper mySwiper">
3 <div class="swiper-wrapper">
4 <div class="swiper-slide">Slide 1div>
5 <div class="swiper-slide">Slide 2div>
6 <div class="swiper-slide">Slide 3div>
7 <div class="swiper-slide">Slide 4div>
8 <div class="swiper-slide">Slide 5div>
9 <div class="swiper-slide">Slide 6div>
10 <div class="swiper-slide">Slide 7div>
11 <div class="swiper-slide">Slide 8div>
12 <div class="swiper-slide">Slide 9div>
13 <div class="swiper-slide">Slide 10div>
14 div>
15
16 <div class="swiper-pagination">div>
17
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({
32 debugger: false,
33 });
34
35 on("init", () => {
36 if (!swiper.params.debugger) return;
37 console.log("init");
38 });
39 on("click", (swiper, e) => {
40 if (!swiper.params.debugger) return;
41 console.log("click");
42 });
43 on("tap", (swiper, e) => {
44 if (!swiper.params.debugger) return;
45 console.log("tap");
46 });
47 on("doubleTap", (swiper, e) => {
48 if (!swiper.params.debugger) return;
49 console.log("doubleTap");
50 });
51 on("sliderMove", (swiper, e) => {
52 if (!swiper.params.debugger) return;
53 console.log("sliderMove");
54 });
55 on("slideChange", () => {
56 if (!swiper.params.debugger) return;
57 console.log(
58 "slideChange",
59 swiper.previousIndex,
60 "->",
61 swiper.activeIndex
62 );
63 });
64 on("slideChangeTransitionStart", () => {
65 if (!swiper.params.debugger) return;
66 console.log("slideChangeTransitionStart");
67 });
68 on("slideChangeTransitionEnd", () => {
69 if (!swiper.params.debugger) return;
70 console.log("slideChangeTransitionEnd");
71 });
72 on("transitionStart", () => {
73 if (!swiper.params.debugger) return;
74 console.log("transitionStart");
75 });
76 on("transitionEnd", () => {
77 if (!swiper.params.debugger) return;
78 console.log("transitionEnd");
79 });
80 on("fromEdge", () => {
81 if (!swiper.params.debugger) return;
82 console.log("fromEdge");
83 });
84 on("reachBeginning", () => {
85 if (!swiper.params.debugger) return;
86 console.log("reachBeginning");
87 });
88 on("reachEnd", () => {
89 if (!swiper.params.debugger) return;
90 console.log("reachEnd");
91 });
92 },
93 },
94 mounted() {
95 this.$nextTick(() => {
96 // 创建swiper对象
97 var swiper = new Swiper(".mySwiper", {
98 modules: [this.myPlugin],
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
108 debugger: 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>