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>
14 <div class="swiper-button-next">div>
15 <div class="swiper-button-prev">div>
16 <div class="swiper-pagination">div>
17
18 div>
19 template>
20 <script>
21 import Swiper from "swiper/swiper-bundle.min.js";
22 import "swiper/swiper-bundle.min.css";
23
24 export default {
25 components: {},
26 methods: {},
27 mounted() {
28 this.$nextTick(() => {
29 // 创建swiper对象
30 var swiper = new Swiper(".mySwiper", {
31 autoHeight: true,
32 spaceBetween: 20,
33 navigation: {
34 nextEl: ".swiper-button-next",
35 prevEl: ".swiper-button-prev",
36 },
37 pagination: {
38 el: ".swiper-pagination",
39 clickable: true,
40 },
41 });
42 });
43 },
44 };
45 script>
46
47 <style>
48 html,
49 body {
50 position: relative;
51 height: 100%;
52 }
53
54 body {
55 background: #eee;
56 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
57 font-size: 14px;
58 color: #000;
59 margin: 0;
60 padding: 0;
61 }
62 .swiper {
63 width: 100%;
64 height: auto;
65 }
66
67 .swiper-slide {
68 text-align: center;
69 font-size: 18px;
70 background: #fff;
71 }
72
73 .swiper .swiper-slide {
74 height: 300px;
75 line-height: 300px;
76 }
77
78 .swiper .swiper-slide:nth-child(2n) {
79 height: 500px;
80 line-height: 500px;
81 }
82 style>