Справка WIX Случайный запуск в галерее слайдов

Question

НАСТРОЙКА

На моем сайте WIX есть:

• коллекция под названием Ads980x120 с несколькими элементами (объявления и ссылки)
• набор данных на странице, связанной с этой коллекцией
• галерея слайдов 980 x 120 пикселей, связанная с этим набором данных (поле изображения и поле ссылки)

В настоящее время он отлично работает, вращая эти изображения на сайте.

ПРОБЛЕМА

Я не хочу, чтобы одно и то же изображение отображалось и начинало вращение при загрузке страницы. Я хочу, чтобы изображения показывались в случайном порядке. Это может быть вариант №1: случайное начальное изображение с последующим продолжением в том же порядке или вариант №2: случайное начальное изображение И случайный порядок. Любой из них подойдет в зависимости от уровня сложности.

Наконец, на некоторых страницах есть несколько разных галерей, поэтому в идеале я мог бы вставить этот код несколько раз на страницу (по одному для каждой галереи), и я хотел бы, чтобы ссылки открывались в новых окнах.

Я надеюсь, что это имеет смысл, и заранее благодарю вас за любой совет или помощь!

Answer 1

Это довольно просто сделать, если вы не против небольшого мерцания. Используя набор данных, вы можете загрузить галерею, а затем рандомизировать изображения, но на короткое время вы увидите исходный порядок.

Чтобы сделать это без такого мерцания, я думаю, вам нужно использовать API wix-data.

Вот код, который я придумал. Вам нужно будет изменить его, чтобы он соответствовал названию и структуре вашей коллекции, а также идентификатору вашей галереи. Я также использую модуль 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;
    }
} );