1 <template>
2 <div class="swiper-twenty-six">
3 <div class="swiper mySwiper">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1div>
6 <div class="swiper-slide">Slide 2div>
7 <div class="swiper-slide">Slide 3div>
8 <div class="swiper-slide">Slide 4div>
9 div>
10 <div class="swiper-button-next">div>
11 <div class="swiper-button-prev">div>
12 <div class="swiper-pagination">div>
13 div>
14
15 <p class="append-buttons">
16 <button class="prepend-2-slides">Prepend 2 Slidesbutton>
17 <button class="prepend-slide">Prepend Slidebutton>
18 <button class="append-slide">Append Slidebutton>
19 <button class="append-2-slides">Append 2 Slidesbutton>
20 p>
21
22 div>
23 template>
24 <script>
25 import Swiper from "swiper/swiper-bundle.min.js";
26 import "swiper/swiper-bundle.min.css";
27
28 export default {
29 components: {},
30 methods: {},
31 mounted() {
32 this.$nextTick(() => {
33 // 创建swiper对象
34 var swiper = new Swiper(".mySwiper", {
35 slidesPerView: 3,
36 centeredSlides: true,
37 spaceBetween: 30,
38 pagination: {
39 el: ".swiper-pagination",
40 type: "fraction",
41 },
42 navigation: {
43 nextEl: ".swiper-button-next",
44 prevEl: ".swiper-button-prev",
45 },
46 });
47
48 var appendNumber = 4;
49 var prependNumber = 1;
50 document
51 .querySelector(".prepend-2-slides")
52 .addEventListener("click", function (e) {
53 e.preventDefault();
54 swiper.prependSlide([
55 'Slide ' + --prependNumber + "
",
56 'Slide ' + --prependNumber + "
",
57 ]);
58 });
59 document
60 .querySelector(".prepend-slide")
61 .addEventListener("click", function (e) {
62 e.preventDefault();
63 swiper.prependSlide(
64 'Slide ' + --prependNumber + "
"
65 );
66 });
67 document
68 .querySelector(".append-slide")
69 .addEventListener("click", function (e) {
70 e.preventDefault();
71 swiper.appendSlide(
72 'Slide ' + ++appendNumber + "
"
73 );
74 });
75 document
76 .querySelector(".append-2-slides")
77 .addEventListener("click", function (e) {
78 e.preventDefault();
79 swiper.appendSlide([
80 'Slide ' + ++appendNumber + "
",
81 'Slide ' + ++appendNumber + "
",
82 ]);
83 });
84 });
85 },
86 };
87 script>
88
89 <style>
90 html,
91 body {
92 position: relative;
93 height: 100%;
94 }
95
96 body {
97 background: #eee;
98 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
99 font-size: 14px;
100 color: #000;
101 margin: 0;
102 padding: 0;
103 }
104 .swiper {
105 width: 100%;
106 height: 500px;
107 }
108
109 .swiper-slide {
110 text-align: center;
111 font-size: 18px;
112 background: #fff;
113
114 /* Center slide text vertically */
115 display: -webkit-box;
116 display: -ms-flexbox;
117 display: -webkit-flex;
118 display: flex;
119 -webkit-box-pack: center;
120 -ms-flex-pack: center;
121 -webkit-justify-content: center;
122 justify-content: center;
123 -webkit-box-align: center;
124 -ms-flex-align: center;
125 -webkit-align-items: center;
126 align-items: center;
127 }
128
129 .swiper-slide img {
130 display: block;
131 width: 100%;
132 height: 100%;
133 object-fit: cover;
134 }
135
136 .swiper {
137 width: 100%;
138 height: 300px;
139 margin: 20px auto;
140 }
141 .append-buttons {
142 text-align: center;
143 margin-top: 20px;
144 }
145
146 .append-buttons button {
147 display: inline-block;
148 cursor: pointer;
149 border: 1px solid #007aff;
150 color: #007aff;
151 text-decoration: none;
152 padding: 4px 10px;
153 border-radius: 4px;
154 margin: 0 10px;
155 font-size: 13px;
156 }
157 style>