WIX 帮助在幻灯片库中随机启动答案

【问题标题】：WIX Help Random start in slide deck galleryWIX 帮助在幻灯片库中随机启动
【发布时间】：2021-02-07 19:39:48
【问题描述】：

设置

在我的 WIX 网站上，我有：

一个名为 Ads980x120 的集合，包含一些整体（广告和链接）
页面上链接到该集合的数据集
链接到该数据集（图像字段和链接字段）的 980p x 120p 幻灯片库

它目前可以完美地在网站上旋转这些图像。

问题

我不希望在页面加载时显示相同的图像并开始旋转。我希望图像以随机顺序显示。这可能是选项#1：随机起始图像，然后以相同顺序继续，或选项#2 随机起始图像和随机顺序。根据难度级别，任何一个都可以。

最后，有些页面有几个不同的画廊，所以理想情况下，我可以在页面上多次粘贴此代码（每个画廊一次），我希望链接可以打开到新窗口。

我希望这是有道理的，并提前感谢您的任何建议或帮助！

【问题讨论】：

标签： random image-gallery velo

【解决方案1】：

如果你不介意一点点闪烁，这很简单。使用数据集，您可以加载图库，然后随机化图像，但您会在短时间内看到原始顺序。

要做到这一点没有那种闪烁，我认为你需要使用 wix-data API。

这是我想出的代码。您必须修改它以适合您的收藏名称和结构以及您的画廊 ID。我还使用 Lodash npm 模块来随机化图像的顺序，但您可以自己编写此代码。最后，您需要从图库中删除所有默认图像。话虽如此，您仍然会有闪烁，但会从空白画廊变为带有随机图像的画廊。

import {rendering} from 'wix-window';
import wixData from 'wix-data';
import _ from 'lodash';

$w.onReady( async () => {
    if(rendering.env === 'browser') {
        const {items} = await wixData.query('CollectionId').find();
        const images = items.map(item => ({src: item.image, title: item.title}));
        const shuffledImages = _.shuffle(images);
        $w('#galleryId').items = shuffledImages;
    }
} );

【讨论】：