标签：pagination 缩放 32 zoom swiper7 true 双击 swiper

 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>

标签：pagination,缩放,32,zoom,swiper7,true,双击,swiper
来源： https://www.cnblogs.com/jyjy28/p/15686117.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。