WIX Help Random start in slide deck gallery - random

Question

THE SETUP
On my WIX site I have:
a collection called Ads980x120 with a few entires (ads and links)
a dataset on the page linked to that collection
a 980p x 120p slide deck gallery linked to that dataset (image field and link field)
It currently works perfectly rotating those images on the site.
THE PROBLEM
I do not want the same image to show and start the rotation when the page loads. I want the images to be shown in a random order. This could be option #1: A random starting image and then continuing in the same order, or option #2 a random starting image AND random order. Either one would be fine based on difficulty level.
Lastly, there are some pages that have a couple different galleries so ideally I would be able to paste this code multiple times on the page (once for each gallery) and I would like the links to open into new windows.
I hope this makes sense and thank you in advance for any advice or help!

Answer 1

This is pretty simple to do if you don't mind a little flicker. Using a dataset you can load the gallery and then randomize the images, but you will see the original order for a short bit.
To do this without that kind of flicker, I think you need to use the wix-data API.
Here's the code I came up with. You will have to modify it to fit your collection name and structure as well as your gallery ID. I am also using the Lodash npm module to randomize the order of the images, but you could write this code yourself. Finally, you need to remove all the default images from the gallery. All that being said, you will still have a flicker, but from a blank gallery to one with a random image.
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;
}
} );