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 <div class="swiper-zoom-container">
9 <img src="images/nature-1.jpg" />
10 div>
11 div>
12 <div class="swiper-slide">
13 <div class="swiper-zoom-container">
14 <img src="images/nature-2.jpg" />
15 div>
16 div>
17 <div class="swiper-slide">
18 <div class="swiper-zoom-container">
19 <img src="images/nature-3.jpg" />
20 div>
21 div>
22 <div class="swiper-slide">
23 <div class="swiper-zoom-container">
24 <img src="images/nature-4.jpg" />
25 div>
26 div>
27 <div class="swiper-slide">
28 <div class="swiper-zoom-container">
29 <img src="images/nature-5.jpg" />
30 div>
31 div>
32 <div class="swiper-slide">
33 <div class="swiper-zoom-container">
34 <img src="images/nature-6.jpg" />
35 div>
36 div>
37 <div class="swiper-slide">
38 <div class="swiper-zoom-container">
39 <img src="images/nature-7.jpg" />
40 div>
41 div>
42 <div class="swiper-slide">
43 <div class="swiper-zoom-container">
44 <img src="images/nature-8.jpg" />
45 div>
46 div>
47 <div class="swiper-slide">
48 <div class="swiper-zoom-container">
49 <img src="images/nature-9.jpg" />
50 div>
51 div>
52 div>
53 <div class="swiper-button-next">div>
54 <div class="swiper-button-prev">div>
55 <div class="swiper-pagination">div>
56 div>
57
58 template>
59 <script>
60 import Swiper from "swiper/swiper-bundle.min.js";
61 import "swiper/swiper-bundle.min.css";
62
63 export default {
64 components: {},
65 methods: {},
66 mounted() {
67 this.$nextTick(() => {
68 // 创建swiper对象
69 var swiper = new Swiper(".mySwiper", {
70 // zoom 开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
71 zoom: true,
72 navigation: {
73 nextEl: ".swiper-button-next",
74 prevEl: ".swiper-button-prev",
75 },
76 pagination: {
77 el: ".swiper-pagination",
78 clickable: true,
79 },
80 });
81 });
82 },
83 };
84 script>
85
86 <style lang="scss" scoped>
87 .swiper {
88 width: 100%;
89 height: 500px;
90 }
91
92 .swiper-slide {
93 overflow: hidden;
94 }
95 style>