vue+swiper实现横向和纵向轮播图——swiper的利用

迩来在写官网，用vue写的。须要实现横向和纵向的轮播图结果
横向轮播图：

纵向轮播图：

下面先容利用方法：
办理步调1：安装"swiper": "^4.5.1"

npm install swiper@4.5.1
办理步调2：页面局部注册swiper

1. /* 引入swiper插件 */
2. import Swiper from "swiper";
3. import "swiper/dist/css/swiper.css";
4. import "swiper/dist/js/swiper";

复制代码

办理步调3：在data中界说两个变量——用于烧毁

1. data(){
2.         return{
3.                 swiper1: null,
4.                 swiper2: null,
5.         }
6. }

复制代码

办理步调4：在mounted中利用

1. mounted(){
2.         if (this.swiper1) {
3.                 this.swiper1.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
4.         }
5.         if (this.swiper2) {
6.                 this.swiper2.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
7.         }
8.         //横向轮播图
9.         this.swiper2 = new Swiper(".swiper2", {
10.                 loop: true, // 无缝
11.                 autoplay: {
12.                         //自动开始
13.                         delay: 3000, //时间间隔
14.                         disableOnInteraction: false //*手动操作轮播图后不会暂停*
15.                 },
16.                 paginationClickable: true,
17.                 slidesPerView: 5, // 一组三个
18.                 spaceBetween: 10, // 间隔
19.                 // 如果需要前进后退按钮
20.                 navigation: {
21.                         nextEl: ".swiper-button-next",
22.                         prevEl: ".swiper-button-prev"
23.                 },
24.                 // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
25.                 observer: true,
26.                 observeParents: true
27.         });
28.         //纵向轮播图
29.         this.swiper1 = new Swiper(".swiper0", {
30.                 loop: true, // 无缝
31.                 autoplay: {
32.                         //自动开始
33.                         delay: 1000, //时间间隔
34.                         disableOnInteraction: false //*手动操作轮播图后不会暂停*
35.                 },
36.                 direction: "vertical",
37.                 paginationClickable: false,
38.                 slidesPerView: 4, // 一组三个
39.                 spaceBetween: 2, // 间隔
40.                 // 如果需要前进后退按钮
41.                 navigation: {
42.                         nextEl: ".swiper-button-next",
43.                         prevEl: ".swiper-button-prev"
44.                 },
45.                 // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
46.                 observer: true,
47.                 observeParents: true
48.         });
49. },

复制代码

同一的样式：

1. .swiper-wrapper {
2.         position: relative;
3.         width: 100%;
4.         height: 100%;
5.         z-index: 1;
6.         display: flex;
7.         align-items: center;
8.         transition-property: transform;
9.         transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
10.         box-sizing: content-box;
11. }
13. .swiper-slide {
14.         text-align: center;
15.         font-size: 18px;
16.         background: #fff;
17.         display: flex;
18.         justify-content: center;
19.         align-items: center;
20.         flex-shrink: 0;
21. }

复制代码

对应的页面内容如下：
先看下横向轮播图的html代码：

1. <div class="swiper-container swiper2">
2.         <div class="swiper-wrapper">
3.                 <div class="swiper-slide" style="height: 350px; display: flex; flex-direction: column" v-for="(item, index) in certList" :key="index">
4.                         <img class="tixi_img" :src="item.img" alt="" />
5.                         <div style="font-size: 12px; margin-top: 6px">{{ item.title }}</div>
6.                 </div>
7.         </div>
8.         <div class="swiper-button-next"></div>
9.         <div class="swiper-button-prev"></div>
10. </div>

复制代码

纵向轮播图除了设置direction方向外，还须要更改左右箭头的位置，将左右箭头改为上下箭头。

1. <div class="swiper-container swiper0">
2.         <div class="swiper-wrapper">
3.                 <div class="swiper-slide" style="height: 140px" v-for="(item, index) in proList" :key="index"><img class="gongchang_img" :src="item" alt="" /></div>
4.         </div>
5.         <div class="swiper-button-next" style="top: calc(100% - 50px); transform: rotate(90deg); right: calc(50% - 10px)"></div>
6.         <div class="swiper-button-prev" style="top: 20px; transform: rotate(90deg); left: calc(50% - 20px)"></div>
7. </div>

复制代码

对应的css代码：

1. .swiper0 {
2.         width: 190px;
3.         height: 480px;
5.         .gongchang_img {
6.                 height: 120px !important;
7.                 width: 190px;
8.                 overflow: hidden;
9.                 object-fit: cover;
10.         }
11. }

复制代码

办理步调5：烧毁swiper

1. beforeDestroy() {
2.         if (this.swiper1) {
3.                 this.swiper1.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
4.         }
5.         if (this.swiper2) {
6.                 this.swiper2.destroy(true, true); // 销毁 Swiper 实例，确保完全销毁并清理资源
7.         }
8. },

复制代码

完成，多多积聚，多多劳绩！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告