admin 管理员组文章数量: 1184232
2024年3月11日发(作者:如何将字母转化为ascii码)
swiper7-33.添加函数开启监听轮播图的各种事件(点击,滑
动...)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 import Swiper from "swiper/";
25 import "swiper/";
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 (!er) return;
37 ("init");
38 });
39 on("click", (swiper, e) => {
40 if (!er) return;
41 ("click");
42 });
43 on("tap", (swiper, e) => {
44 if (!er) return;
45 ("tap");
46 });
47 on("doubleTap", (swiper, e) => {
48 if (!er) return;
49 ("doubleTap");
50 });
51 on("sliderMove", (swiper, e) => {
52 if (!er) return;
53 ("sliderMove");
54 });
55 on("slideChange", () => {
56 if (!er) return;
57 (
58 "slideChange",
59 usIndex,
60 "->",
61 Index
62 );
63 });
64 on("slideChangeTransitionStart", () => {
65 if (!er) return;
66 ("slideChangeTransitionStart");
67 });
68 on("slideChangeTransitionEnd", () => {
69 if (!er) return;
70 ("slideChangeTransitionEnd");
71 });
72 on("transitionStart", () => {
73 if (!er) return;
74 ("transitionStart");
75 });
76 on("transitionEnd", () => {
77 if (!er) return;
78 ("transitionEnd");
79 });
80 on("fromEdge", () => {
81 if (!er) return;
82 ("fromEdge");
83 });
84 on("reachBeginning", () => {
85 if (!er) return;
86 ("reachBeginning");
87 });
88 on("reachEnd", () => {
89 if (!er) return;
90 ("reachEnd");
91 });
92 },
93 },
94 mounted() {
95 this.$nextTick(() => {
96 // 创建swiper对象
97 var swiper = new Swiper(".mySwiper", {
98 modules: [in],
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
114
115
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
版权声明:本文标题:swiper7-33.添加函数开启监听轮播图的各种事件(点击,滑动)_ 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/p/1710103956a557861.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论