swiper改动之显示三个滑块,左右两个滑块露出一部分

本文介绍如何使用Swiper轮播插件并进行定制化修改,以满足特定的设计需求,如在同一屏幕显示多个轮播项,并使每个项部分可见,增强用户体验。

      说到滚动轮播,很多人就会想到swiper.js这个插件,最近一个微信项目用的jQuery-weUI样式库,这个UI库的滚动轮播也是封装的swiper插件,直接引用虽然很简单,不过要是有一些特殊需求的话,还是需要自己去改造的,比如下图需求:

可看到不仅只是滑动,还需要同时显示三个,中间一个全部显示,左右两个露出一部分,让用户看到,然后知道可以滑动。普通的swiper只能满足于一个个100%宽度显示然后滑动,这就需要修改swiper的样式部分了,具体css代码如下:

/* 轮播定制化  --begin*/
.storeActivity-list .swiper-slide{
    width: 90%!important;
    margin: 0 5%;
}
.swiper-slide-prev{
    right:-8%;
}
.swiper-slide-next{
    left:-8%;
}
/* 轮播定制化  --end*/

代码还是比较简单的,宽度直接修改,然后让上一个swiper-slide-prev距离右边露出来8%的宽度,下一个swiper-slide-next距离左边露出来8%的宽度,这样就实现了一个屏幕显示3个,左右都只露出来一部分的需求了。效果图如下:

使用 Swiper 实现显示两个元素、滚动一个元素并循环滚动,可通过如下步骤达成。 ### 安装与引入 Swiper 若使用 npm 安装,运行以下命令: ```bash npm install swiper ``` 在项目里引入 Swiper 的 CSS 和 JavaScript 文件: ```javascript import Swiper from 'swiper'; import 'swiper/css'; ``` ### HTML 结构 构建基本的 HTML 结构,包含 Swiper 容器和幻灯片: ```html <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">元素 1</div> <div class="swiper-slide">元素 2</div> <div class="swiper-slide">元素 3</div> <div class="swiper-slide">元素 4</div> <!-- 可添加更多元素 --> </div> </div> ``` ### JavaScript 配置 配置 Swiper 实例,以实现显示两个元素、滚动一个元素并循环滚动: ```javascript const swiper = new Swiper('.swiper', { slidesPerView: 2, // 显示 2 个元素 spaceBetween: 10, // 幻灯片之间的间距 loop: true, // 启用循环滚动 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 可按需添加其他配置 }); ``` ### 代码解释 - `slidesPerView: 2`:设置页面默认展示 2 条数据[^3]。 - `loop: true`:启用循环模式,滑动到最后一张后会自动跳转到第一张,形成循环[^3]。 ### 完整示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swiper Example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/> </head> <body> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">元素 1</div> <div class="swiper-slide">元素 2</div> <div class="swiper-slide">元素 3</div> <div class="swiper-slide">元素 4</div> </div> <!-- 如果需要导航按钮 --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script> const swiper = new Swiper('.swiper', { slidesPerView: 2, spaceBetween: 10, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html> ```
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值