Add option to set custom autoslide duration for each slide

Ask the Community Customization
1

I want to implement an auto-slide feature based on the content. For videos, I’d like to set custom durations, and for images, I want to assign different timings.

1 Like
3

Hi there, @user16900 :wave:

Glad to say that our devs came up with a custom code for your use case. It should be added to the Custom JS field on the Advanced tab of your widget’s settings:

const waitForElement = (selector, root = document, maxAttempts = 50) => 
  new Promise((resolve) => {
    let attempts = 0;

    const check = () => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, 100);
      }
    };

    check();
  });

const monitorSlider = async () => {
  const navigationContainer = await waitForElement('.eapp-slider-navigation-navigation');
  const nextButton = navigationContainer.querySelector('.eapp-slider-navigation-next');
  const sliderContainer = await waitForElement('.eapp-slider-slider-inner');

  const processActiveSlide = async () => {
    const activeSlide = sliderContainer.querySelector('.eapp-slider-slider-active');

    if (!activeSlide) return;

    const videoOuter = activeSlide.querySelector('.eapp-slider-background-videoOuter');

    if (videoOuter) {
      await waitForElement('video', videoOuter);
      setTimeout(() => {
        nextButton.click();
        processActiveSlide();
      }, 10000);
    } else {
      setTimeout(() => {
        nextButton.click();
        processActiveSlide();
      }, 2000);
    }
  };

  processActiveSlide();
};

monitorSlider();

The duration is set in milliseconds. For slides with video it’s 10000 ms and for image slides - 2000 ms. However, you can change these values to your liking here:

image
image657×475 37.3 KB


To make the code work fine, you should disable the Autoslide feature. Keep in mind that Custom JS operates only upon widget installation, not in preview mode.

Try it out and let me know how it worked :slightly_smiling_face:

1 Like