实现 Splide.js 垂直全屏滑块：解决鼠标滚轮单页滚动问题-js教程-PHP中文网

实现 Splide.js 垂直全屏滑块：解决鼠标滚轮单页滚动问题

霞舞

发布： 2025-10-16 09:50:17

原创

179人浏览过

实现 splide.js 垂直全屏滑块：解决鼠标滚轮单页滚动问题

本教程详细介绍了如何使用 Splide.js 创建一个垂直方向的全屏滑块，并解决鼠标滚轮滚动时一次滑动多页的问题。通过正确配置 `direction`、`height`、`wheel`、`perPage` 和 `perMove` 等核心选项，您可以确保每次滚轮操作只平滑地切换一个页面，从而实现理想的单页滚动体验。

引言：Splide.js 垂直全屏滑块的挑战

在使用 Splide.js 构建垂直方向的全屏滑块时，开发者常常会遇到一个问题：当启用鼠标滚轮滚动（wheel: true）后，滑块在用户滚动鼠标滚轮时，并非如预期般每次只切换一页，而是会一次性滑动多页。这通常会导致用户体验不佳，尤其是在需要精确控制页面切换的全屏展示场景中。这个问题通常源于 Splide.js 在未明确指定 perPage 和 perMove 等选项时，对垂直方向滚轮事件的默认处理方式。

核心解决方案：perPage 与 perMove 选项

要解决鼠标滚轮一次滑动多页的问题，关键在于正确理解和配置 Splide.js 的 perPage 和 perMove 选项。这两个选项协同工作，精确控制滑块的显示和移动行为。

perPage 选项：定义每页显示的幻灯片数量perPage 选项决定了在滑块的可见区域内，同时显示多少个完整的幻灯片。对于实现“全屏单页”效果，即每次只显示一个完整的幻灯片，应将 perPage 设置为 1。
perMove 选项：定义每次移动的幻灯片数量perMove 选项控制每次导航操作（无论是通过箭头、分页器、触摸滑动还是鼠标滚轮）时，滑块实际移动的幻灯片数量。要确保鼠标滚轮每次只切换一个幻灯片，perMove 必须设置为 1。这是解决“一次滑动多页”问题的核心。

小羊标书
一键生成百页标书，让投标更简单高效

62

查看详情

实现步骤与示例代码

下面将通过一个完整的示例，展示如何配置 Splide.js 以实现垂直全屏单页滚动的效果。

1. HTML 结构

首先，您需要一个基本的 Splide 容器和一些幻灯片元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splide.js 垂直全屏单页滑块</title>
    <!-- 引入 Splide.js CSS 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <style>
        /* 确保 HTML 和 Body 没有默认边距和填充，并占据整个视口高度 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* 防止页面自身滚动，与滑块滚轮冲突 */
            font-family: Arial, sans-serif;
        }

        /* Splide 容器和幻灯片样式 */
        .splide {
            height: 100vh; /* 确保滑块容器占据整个视口高度 */
        }

        .splide__track {
            height: 100%; /* 轨道高度与容器一致 */
        }

        .splide__list {
            height: 100%; /* 列表高度与轨道一致 */
        }

        .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4em;
            color: white;
            height: 100vh; /* 每个幻灯片占据整个视口高度 */
            box-sizing: border-box; /* 边框和内边距包含在高度内 */
        }

        /* 示例幻灯片背景色 */
        .splide__slide:nth-child(1) { background-color: #3498db; }
        .splide__slide:nth-child(2) { background-color: #e74c3c; }
        .splide__slide:nth-child(3) { background-color: #2ecc71; }
        .splide__slide:nth-child(4) { background-color: #f1c40f; }
        .splide__slide:nth-child(5) { background-color: #9b59b6; }
    </style>
</head>
<body>

    <div id="vertical-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">Slide 1</li>
                <li class="splide__slide">Slide 2</li>
                <li class="splide__slide">Slide 3</li>
                <li class="splide__slide">Slide 4</li>
                <li class="splide__slide">Slide 5</li>
            </ul>
        </div>
    </div>

    <!-- 引入 Splide.js JavaScript 库 -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <script>
        // JavaScript 配置将在下方详细说明
    </script>
</body>
</html>

登录后复制

2. JavaScript 配置

在 <script> 标签中添加以下 JavaScript 代码，初始化 Splide 实例并设置相关选项。

document.addEventListener('DOMContentLoaded', function () {
  new Splide('#vertical-slider', {
    direction: 'ttb',     // 设置滑块方向为垂直 (Top to Bottom)
    height: '100vh',      // 设置滑块容器高度为视口高度，实现全屏
    wheel: true,          // 启用鼠标滚轮事件来控制滑块导航
    perPage: 1,           // 每页显示一个幻灯片，实现单页全屏显示
    perMove: 1,           // 每次滚轮操作只移动一个幻灯片，解决多页滚动问题
    arrows: false,        // 可选：隐藏导航箭头
    pagination: true,     // 可选：显示分页指示器
    releaseWheel: true    // 推荐：当滑块到达起点或终点时，允许滚轮事件继续滚动页面
  }).mount();
});

登录后复制

关键选项详解

direction: 'ttb':
- 此选项将滑块的方向设置为“从上到下”（Top to Bottom），使其成为垂直滑块。
height: '100vh':
- 将滑块容器的高度设置为 100vh（100% 视口高度），确保滑块占据整个屏幕高度，实现全屏效果。
wheel: true:
- 启用鼠标滚轮事件。当用户滚动鼠标滚轮时，Splide 滑块将响应并进行导航。
perPage: 1:
- 这是实现“全屏单页”显示的关键。它告诉 Splide 始终只显示一个完整的幻灯片。
perMove: 1:
- 这是解决鼠标滚轮一次滑动多页问题的核心。它强制 Splide 在每次导航操作（包括鼠标滚轮滚动）时，只移动一个幻灯片。
arrows: false (可选):
- 隐藏默认的左右导航箭头，因为在全屏垂直滑块中，用户通常更依赖滚轮或分页器。
pagination: true (可选):
- 显示分页指示器（小圆点），这对于垂直全屏滑块非常有用，可以直观地显示当前页码和总页数。
releaseWheel: true (可选但推荐):
- 此选项增强了用户体验。当滑块到达第一个或最后一个幻灯片时，如果页面上还有其他可滚动内容，鼠标滚轮事件将“释放”并允许滚动页面的其余部分，而不是卡在滑块上。

注意事项与最佳实践

CSS 样式一致性： 确保 .splide__slide 元素本身也具有 height: 100vh; 样式，以确保每个幻灯片都能完全填充屏幕。同时，对 html 和 body 元素设置 margin: 0; padding: 0; height: 100%; overflow: hidden; 是实现无缝全屏体验的常见做法。
内容适应性： 垂直全屏滑块要求每个幻灯片的内容能够良好地适应 100vh 的高度。考虑使用 Flexbox 或 Grid 布局来管理幻灯片内部的内容，确保在不同屏幕尺寸下都能优雅地显示。
用户体验反馈： 除了 pagination，还可以考虑添加其他视觉或动画反馈，让用户清楚地知道他们正在切换页面。
无障碍性： 如果隐藏了默认的箭头导航，请确保提供其他键盘可访问的导航方式，以提升无障碍体验。Splide.js 通常会自动处理一些基本的键盘导航。
性能优化： 对于包含大量图片或复杂内容的滑块，考虑使用 Splide.js 提供的懒加载（lazyLoad: 'sequential' 或 'nearby'）等功能，以优化加载性能。

总结

通过正确配置 Splide.js 的 direction: 'ttb'、height: '100vh'、wheel: true，并结合关键的 perPage: 1 和 perMove: 1 选项，您可以轻松实现一个功能完善、用户体验流畅的垂直全屏单页滑块。这种配置不仅解决了鼠标滚轮一次滑动多页的问题，还为构建现代化的全屏展示页面提供了坚实的基础。

以上就是实现 Splide.js 垂直全屏滑块：解决鼠标滚轮单页滚动问题的详细内容，更多请关注php中文网其它相关文章！