Loop through Gallery Slideshow Once + then Pause

Ask the community
,
1

Hi there

I need to loop through my gallery slide deck once + then pause

Can you help me out?

Thanks

Ant

2

If you are talking about the slideshows from within Wix Editor, then you are best going to Wix Support for help.
https://support.wix.com/en/the-wix-editor/slideshows
https://support.wix.com/en/article/changing-the-autoplay-setting-on-your-slideshow

This forum is for issues with the code on your page.

3

Thanks for your quick reply

The standard GUI settings don’t allow for what exactly I need. The code I have tried to sort out the issue is:

$w.onReady( function () {
$w(“#gallery3”).play();

let currentIndex3 = $w(“#gallery3”).currentIndex;

if (currentIndex3 === 3){
$w(“#gallery3”).pause();
}
});

However, this obviously isn’t working

Thanks for your patience

Ant

4

@vervoorta Check for the currentIndex within a onCurrentItemChanged() .

So something like:

$w('#myGallery').onCurrentItemChanged( (event) => {
  let itemIndex = event.itemIndex
  if (itemIndex === 3) {
       $w('#myGallery').pause();   
  }              
} );
5

@ohad-laufer thanks so much for that code snippet.

Just to give you an idea of what I am trying to do:

I am running through all of the galleries as the page loads, so that the galleries run seamlessly (otherwise there is terrible lag between slides)

The code snippet works wonderfully for the desktop site, HOWEVER lag on the mobile site is still unbelievable.

https://www.frankiepappas.com/house-of-the-big-arch

Could you have a quick look to help me out. Really appreciate it!!!

Code currently used on page:

// Import statement go at the top of your code, outside of onReady()
import wixWindow from ‘wix-window’;

// Initialization statements without $w() don’t need to be in onReady()
let hideCount = 0;

$w.onReady( function () {

//gallery 4
$w(“#gallery4”).play();

$w(‘#gallery4’).onCurrentItemChanged( (event) => {
let itemIndex = event.itemIndex
if (itemIndex === 0) {
$w(‘#gallery4’).pause();
}
});

//gallery 3
$w(“#gallery3”).play();

$w(‘#gallery3’).onCurrentItemChanged( (event) => {
let itemIndex = event.itemIndex
if (itemIndex === 0) {
$w(‘#gallery3’).pause();
}
});

//gallery 2
$w(“#gallery2”).play();

$w(‘#gallery2’).onCurrentItemChanged( (event) => {
let itemIndex = event.itemIndex
if (itemIndex === 0) {
$w(‘#gallery2’).pause();
}
});

//gallery 1
$w(“#gallery1”).play();

$w(‘#gallery1’).onCurrentItemChanged( (event) => {
let itemIndex = event.itemIndex
if (itemIndex === 0) {
$w(‘#gallery1’).pause();
}
});

})

6

@vervoorta

Have a read of this about image:
An element might not be in the DOM if it is in a slide which is not currently showing.
https://www.wix.com/corvid/reference/$w.Image.html#rendered

Plus, this about slide:
An element might not be in the DOM if it is in a slide which is not currently showing.
https://www.wix.com/corvid/reference/$w.Slide.html#rendered

Finally, check your mobile design as this can be affecting your speed too, if you want a quicker and speedier loading then you will have to lose some slideshows, website speed over/or user interface:
Look for heavy elements, such as third party apps, media files and lightboxes, that may not be crucial to the running of the mobile version if your site.
https://support.wix.com/en/article/site-performance-and-loading-time#loading-time-on-mobile-sites

Otherwise, think about having a seperate landing page, so that the first page of your website does not have lots of images and is just one image with header above the fold.

The fold being where the display ends on your device, so it loads everything above the fold first and if that isn’t much then it will be quick.