Hi, I have a simple full width slideshow (project images), which i want to start on a random slide each time the page is reloaded.
at the moment I have my element hidden on load, then using following code
let rnd = Math.floor(Math.random() * 8);
$w(‘#fullWidthSlides1’).changeSlide(rnd);
$w(‘#fullWidthSlides1’).show();
The slideshow always lands on the first index, then changes randomly.
I thought using show(); after changing to random index would work, but still lands on first item.
any help appreciated!
@jonatandor35
thanks so much!
is there something I can add to the second solution to make the slideshow progress on through the slides? so end functionality is that it lands on the random slide number, then progresses through the slides (either randomly, or just sequentially through the index numbers)?
@alinamcc I’m not completely sure I got your question, but you can set the slideshow to auto-play via the editor >Settings > Auto=play on loading.
Then together with your code, it’ll start from a random slide and switch slides by index order every x seconds.
you can cancel the auto-play on the editor and use a combination of setInterval() method + changeSlide function to switch slides by code every X time by any order you want.
@jonatandor35 Hi JD. yes it is set to autoplay, but it is not progressing past the first slide.
when i scroll all the way to the bottom of the page, then scroll back up, the autoplay starts. https://www.s333.org/
I fo have a couple other functions on the page which are just showing and hiding the top menu, nothing to do with the slideshow.
any idea where the problem is?
@alinamcc I can see it. I don’t know the reason, but I guess Wix programmed it to pause when your focus is on the slide.
You can try my second suggestion and make it work with code (it’s quite a simple code).
@jonatandor35 thanks JD
ive added a .play(); doesn’t seem to have any affect… unsure if this is the right approach (sorry i’m new to wix code) appreciate if you can point me in the right direction.
Cheers!
$w.onReady( function () { let rnd = Math.floor(Math.random() * 6);
$w(“#fullWidthSlides1”).changeSlide(rnd)
.then( (newSlide) => {
$w(‘#fullWidthSlides1’).show()
} );
$w(‘#fullWidthSlides1’).play();
});
@alinamcc you can cancel the auto-play on the editor, and try code like this:
$w.onReady(function () {
let numberOfSlides = 8;//max number of slides
let rnd = Math.floor(Math.random() * (numberOfSlides)); //generate a random number between 0 and max
$w("#fullWidthSlides1").changeSlide(rnd)
.then( (newSlide) => {
$w('#fullWidthSlides1').show();
} )
let nextSlide = rnd;//current slide
setInterval(() => {
nextSlide === numberOfSlides - 1 ? nextSlide = 0 : nextSlide += 1;/*set up the next index (index 0 if it's the last slide)*/
$w("#fullWidthSlides1").changeSlide(nextSlide);
}, 3000)//interval in milliseconds (in this example: 3 seconds)
});
@jonatandor35 Good day, I am new to corvid wix coding. I applied the first promise “then” block and my slideshow starts a random image but it proceeds sequentially. is there any way to change that sequential order to random and make it repeat? thanks in advance
@taqtech , sorry for the late reply.
Do you want to shuffle the slides randomly? Right?
Do you want to make the a new random order once the the user has loaded the page and keep the new order from there, or maybe you want to re-shuffle the slides every time a full cycle ends?
@jonatandor35 Hi ok so for eg i have a slideshow of images 1,2,3,4,5. what i’m trying to achieve is on every page load or refresh it starts with a random image (say 3) and then cycles randomly thru the image count. no need for a new reshuffle after the cycle ends but definitly a shuffle on refresh of the page or loading of the page. “Do you want to make the a new random order once the the user has loaded the page and keep the new order from there” <=== this essentially
@taqtech OK. First click the slideshow on the editor > Settings > select the transition animation but do not select horizontal sliding (this random change won’t look good if you change ti horizontally).
$w.onReady(function () {
let slides = $w("#fullWidthSlides1").slides;
let numOfSlides = slides.length;
let indexes = slides.map((e, index) => index);
let rnd, nextSlide = 0;
shuffledIndexes();
function shuffledIndexes() {
for (let i = indexes.length - 1; i > 0; i--) {
rnd = Math.floor(Math.random() * (i + 1));
[indexes[i], indexes[rnd]] = [indexes[rnd], indexes[i]];
}
}
$w("#fullWidthSlides1").changeSlide(slides[indexes[0]])
.then(() => {
$w('#fullWidthSlides1').show();
})
setInterval(() => {
nextSlide++;
nextSlide %= numOfSlides;
$w("#fullWidthSlides1").changeSlide(indexes[nextSlide]);
}, 3000) //interval in milliseconds (in this example: 3 seconds)
});
@jonatandor35 Thank you so so much. I will try to read through and understand the code i was kinda understanding your very first one at the top of the post with the math.random, this one u just sent… uh yea lol… but thanks again. its working exactly how i wanted.
Basically, it’s very close to the previous one, but this time I first created an array containing the indices of the slides [0,1,2,…], and used Durstenfeld shuffle to rearrange the index array.
Every 3000 ms I picked up the next value from the index array and changed the slide to the index of this value.
I hope it’s clear.
I have exactly the same problem.
I have random numbers, but at the beginning it always shows the same first slide. After that it is working. Another issue I have: The first slide (whatever it is) does sometimes not show the image I added, but when I switch to the second slide and then back to the first one the image is visible. Just the initial state is sometimes not working correctly. Any help?