如何使用Wordpress Sage和Tailwind CSS动态生成同时更改和调整的轮播

Question

你好！

也许有人可以帮助我。 我建立了一个基于 WordPress Sage 和 Tailwind CSS 的网站。 项目中有一个轮播模块，长这个样子：

问题是轮播块中的最后一张照片占据了两行。我无法在轮播中动态生成此类内容，该内容会同时更改（向右/向左滚动）并根据屏幕宽度进行响应调整（另一个附件）。 你们中有人在 Sage 上遇到过类似的挑战吗？ 我找到了一个完美体现我想要达到的效果的组件：https://splidejs.com/extensions/grid
问题是文档基本为零，我无法重新创建链接中的示例。 如果有人知道如何解决这个问题，我将不胜感激。 :)

Answer 1

安装Splide.js： 首先将 Splide.js 库安装到您的项目中。您可以使用 npm 或 yarn 来实现此目的： npm 安装@splidejs/splide 安装后，请确保在您的项目中包含 Splide.js CSS 和 JavaScript 文件。

创建 HTML 结构： 在 WordPress 模板文件中，创建类似于网格轮播结构的 HTML 结构。这可以是一个简单的无序列表 ()，其中每个轮播项都有列表项 (

)。

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 1</li>
            <li class="splide__slide">Slide 2</li>
            <!-- Add more slides -->
        </ul>
    </div>
</div>

初始化Splide.js： 在 JavaScript 文件中，使用 .splide 类在元素上初始化 Splide.js：

import Splide from '@splidejs/splide';

document.addEventListener('DOMContentLoaded', function () {
    new Splide('.splide', {
        perPage: 1, // Number of slides per view
        type: 'loop', // Infinite loop
        breakpoints: {
            640: {
                perPage: 2, // Number of slides per view on smaller screens
            },
            768: {
                perPage: 3, // Number of slides per view on medium screens
            },
            // Define more breakpoints as needed
        },
    }).mount();
});

根据您的设计要求调整每页选项和断点。

设计您的轮播：

根据需要使用 CSS 设置轮播样式，调整幻灯片宽度、内边距、边距和其他样式以创建网格效果。