1 <template>
2
3 <div class="swiper mySwiper">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">
6 <img src="images/nature-1.jpg" />
7 div>
8 <div class="swiper-slide">
9 <img src="images/nature-2.jpg" />
10 div>
11 <div class="swiper-slide">
12 <img src="images/nature-3.jpg" />
13 div>
14 <div class="swiper-slide">
15 <img src="images/nature-4.jpg" />
16 div>
17 div>
18 <div class="swiper-button-next">div>
19 <div class="swiper-button-prev">div>
20 <div class="swiper-pagination">div>
21
22 div>
23 template>
24 <script>
25 import Swiper from "swiper/swiper-bundle.min.js";
26 import "swiper/swiper-bundle.min.css";
27 export default {
28 components: {},
29 methods: {},
30 mounted() {
31 this.$nextTick(() => {
32 // 创建swiper1对象
33 var swiper = new Swiper(".mySwiper", {
34 spaceBetween: 30, // 在slide之间设置距离（单位px）。这个在这里并不起效果
35 // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
36 effect: "fade",
37 navigation: {
38 nextEl: ".swiper-button-next",
39 prevEl: ".swiper-button-prev",
40 },
41 pagination: {
42 el: ".swiper-pagination",
43 clickable: true,
44 },
45 });
46 });
47 },
48 };
49 script>
50
51 <style lang="scss" scoped>
52 .swiper {
53 width: 100%;
54 height: 500px;
55 }
56
57 .swiper-slide {
58 background-position: center;
59 background-size: cover;
60 }
61
62 .swiper-slide img {
63 display: block;
64 width: 100%;
65 }
66 style>