1 <template>
2 <div
3 style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
4 class="swiper mySwiper"
5 >
6 <div class="swiper-wrapper">
7 <div class="swiper-slide">
8
9 <img data-src="images/nature-1.jpg" class="swiper-lazy" />
10
11 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
12 div>
13 <div class="swiper-slide">
14
15 <img data-src="images/nature-2.jpg" class="swiper-lazy" />
16
17 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
18 div>
19 <div class="swiper-slide">
20
21 <img data-src="images/nature-3.jpg" class="swiper-lazy" />
22
23 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
24 div>
25 <div class="swiper-slide">
26
27 <img data-src="images/nature-4.jpg" class="swiper-lazy" />
28
29 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
30 div>
31 <div class="swiper-slide">
32
33 <img data-src="images/nature-5.jpg" class="swiper-lazy" />
34
35 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
36 div>
37 <div class="swiper-slide">
38
39 <img data-src="images/nature-6.jpg" class="swiper-lazy" />
40
41 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
42 div>
43 <div class="swiper-slide">
44
45 <img data-src="images/nature-7.jpg" class="swiper-lazy" />
46
47 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
48 div>
49 <div class="swiper-slide">
50
51 <img data-src="images/nature-8.jpg" class="swiper-lazy" />
52
53 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
54 div>
55 <div class="swiper-slide">
56
57 <img data-src="images/nature-9.jpg" class="swiper-lazy" />
58
59 <div class="swiper-lazy-preloader swiper-lazy-preloader-white">div>
60 div>
61 div>
62 <div class="swiper-button-next">div>
63 <div class="swiper-button-prev">div>
64 <div class="swiper-pagination">div>
65 div>
66
67 template>
68 <script>
69 import Swiper from "swiper/swiper-bundle.min.js";
70 import "swiper/swiper-bundle.min.css";
71
72 export default {
73 components: {},
74 methods: {},
75 mounted() {
76 this.$nextTick(() => {
77 // 创建swiper对象
78 var swiper = new Swiper(".mySwiper", {
79 lazy: true,
80 pagination: {
81 el: ".swiper-pagination",
82 clickable: true,
83 },
84 navigation: {
85 nextEl: ".swiper-button-next",
86 prevEl: ".swiper-button-prev",
87 },
88 });
89 });
90 },
91 };
92 script>
93
94 <style>
95 html,
96 body {
97 position: relative;
98 height: 100%;
99 }
100
101 body {
102 background: #eee;
103 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
104 font-size: 14px;
105 color: #000;
106 margin: 0;
107 padding: 0;
108 }
109 .swiper {
110 width: 100%;
111 height: 500px;
112 }
113 .swiper-slide {
114 text-align: center;
115 font-size: 18px;
116 background: #000;
117 }
118
119 .swiper-slide img {
120 width: auto;
121 height: auto;
122 max-width: 100%;
123 max-height: 100%;
124 -ms-transform: translate(-50%, -50%);
125 -webkit-transform: translate(-50%, -50%);
126 -moz-transform: translate(-50%, -50%);
127 transform: translate(-50%, -50%);
128 position: absolute;
129 left: 50%;
130 top: 50%;
131 }
132 style>