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

问题描述

设置

在我的 WIX 网站上，我有：

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

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

问题

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

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

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

解决方法

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

要做到这一点而没有那种闪烁，我认为您需要使用 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;
    }
} );

image-gallery random velo