在swiper.js中添加分页滚动的效果
原创
以下是一个在swiper.js中实现分页滚动效果的示例，这个实现会让轮播每次滚动固定数量的幻灯片，而不是一次滚动一个，非常适合需要批量展示内容的场景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper分页滚动效果</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 引入Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
/* 自定义Swiper样式 */
.swiper-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.swiper-button-prev, .swiper-button-next {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
color: #3B82F6;
z-index: 10;
}
.swiper-button-prev:after, .swiper-button-next:after {
font-size: 18px;
font-weight: bold;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #CBD5E1;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: #3B82F6;
width: 24px;
border-radius: 4px;
transition: width 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50 font-sans p-4 md:p-8">
<div class="max-w-6xl mx-auto">
<header class="mb-12 text-center">
<h1 class="text-3xl font-bold text-gray-900 mb-3">Swiper分页滚动效果</h1>
<p class="text-gray-600">每次滚动固定数量的项目，实现分页浏览效果</p>
</header>
<!-- 控制选项 -->
<div class="bg-white p-4 rounded-lg shadow-sm mb-8 flex flex-wrap gap-4 items-center justify-center">
<div class="flex items-center">
<label for="slidesPerView" class="mr-2 text-gray-700">每页显示数量:</label>
<select id="slidesPerView" class="border border-gray-300 rounded-md px-3 py-1.5">
<option value="2">2个</option>
<option value="3" selected>3个</option>
<option value="4">4个</option>
<option value="5">5个</option>
</select>
</div>
<div class="flex items-center">
<label for="slidesPerGroup" class="mr-2 text-gray-700">每次滚动数量:</label>
<select id="slidesPerGroup" class="border border-gray-300 rounded-md px-3 py-1.5">
<option value="1">1个</option>
<option value="2">2个</option>
<option value="3" selected>3个</option>
<option value="4">4个</option>
</select>
</div>
<div class="flex items-center">
<label class="mr-2 text-gray-700">循环播放:</label>
<input type="checkbox" id="loop" class="h-4 w-4 text-primary" checked>
</div>
<button id="updateConfig" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
更新配置
</button>
</div>
<!-- 分页滚动演示区域 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12">
<div class="p-6 border-b">
<h2 class="text-xl font-semibold">产品展示 (分页滚动)</h2>
<p class="text-gray-500 text-sm">点击箭头或底部指示器进行分页浏览</p>
</div>
<div class="p-4 md:p-6">
<!-- Swiper容器 -->
<div class="swiper" id="pagedSwiper">
<!-- 轮播内容 -->
<div class="swiper-wrapper">
<!-- 项目1 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=1" alt="产品图片1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 01</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥199</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目2 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=2" alt="产品图片2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 02</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥299</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目3 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=3" alt="产品图片3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 03</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥399</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目4 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=4" alt="产品图片4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 04</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥499</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目5 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=5" alt="产品图片5" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 05</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥599</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目6 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=6" alt="产品图片6" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 06</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥699</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目7 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=7" alt="产品图片7" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 07</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥799</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
<!-- 项目8 -->
<div class="swiper-slide p-2">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm h-full">
<img src="https://picsum.photos/400/300?random=8" alt="产品图片8" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-medium text-lg mb-2">产品 08</h3>
<p class="text-gray-600 text-sm mb-3">这是产品的详细描述信息，包含产品特点和优势。</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold">¥899</span>
<button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors">
加入购物车
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 分页指示器 -->
<div class="swiper-pagination mt-6"></div>
</div>
</div>
</div>
</div>
<!-- 引入Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// 初始化变量
let swiperInstance;
let slidesPerView = 3;
let slidesPerGroup = 3;
let loop = true;
// 初始化Swiper
function initSwiper() {
// 如果已有实例，先销毁
if (swiperInstance) {
swiperInstance.destroy(true, true);
}
// 创建新实例
swiperInstance = new Swiper('#pagedSwiper', {
// 分页滚动核心配置
slidesPerView: slidesPerView, // 每页显示的数量
slidesPerGroup: slidesPerGroup, // 每次滚动的数量
loop: loop, // 是否循环
// 响应式配置
breakpoints: {
320: {
slidesPerView: Math.min(slidesPerView, 2),
slidesPerGroup: Math.min(slidesPerGroup, 2),
},
768: {
slidesPerView: Math.min(slidesPerView, 3),
slidesPerGroup: Math.min(slidesPerGroup, 3),
},
1024: {
slidesPerView: slidesPerView,
slidesPerGroup: slidesPerGroup,
}
},
// 导航按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 分页指示器
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
dynamicMainBullets: 3
},
// 其他配置
spaceBetween: 20, // 间距
speed: 500, // 动画速度
grabCursor: true, // 鼠标样式
watchSlidesProgress: true,
});
}
// 更新配置
document.getElementById('updateConfig').addEventListener('click', () => {
slidesPerView = parseInt(document.getElementById('slidesPerView').value);
slidesPerGroup = parseInt(document.getElementById('slidesPerGroup').value);
loop = document.getElementById('loop').checked;
// 重新初始化
initSwiper();
// 显示更新提示
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg z-50';
notification.textContent = '配置已更新';
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 2000);
});
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initSwiper);
</script>
</body>
</html>
这个分页滚动实现的核心特点和配置说明：
- 分页滚动核心配置：
slidesPerView：设置每页显示的幻灯片数量slidesPerGroup：设置每次滚动的幻灯片数量（实现分页效果的关键）- 这两个属性配合使用，实现了"一次滚动固定数量项目"的分页效果
- 交互增强：
- 顶部提供了配置控制器，可以实时调整每页显示数量和每次滚动数量
- 支持循环播放切换
- 导航按钮和分页指示器都可以控制滚动
- 响应式设计：
- 通过
breakpoints配置不同屏幕尺寸下的显示效果 - 在小屏幕上自动调整每页显示的项目数量
- 通过
- 用户体验优化：
- 平滑的过渡动画
- 可点击的分页指示器
- 悬停时的光标变化
- 配置更新时的反馈提示
您可以根据实际需求调整slidesPerView和slidesPerGroup的值，实现不同的分页效果。例如，当两者设置为相同值时，每次滚动会切换一整页内容；当slidesPerGroup小于slidesPerView时，则会实现部分滚动的效果。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
