Slideshow with different design per slide

Ask the community
,
1

I’m having trouble with a slideshow.

I need a 4 slides slideshow. Each one has 3 apartaments boxes, each one with different details, images etc.

The last slide has only 2 boxes but since it is a slideshow repeater i can’t change the design (hiding or cancelling the last box) from the single slide, but it changes for the all 4

Working in
Wix Studio Editor

Screenshot 2025-08-14 115355
Screenshot 2025-08-14 1153551094×580 224 KB

2

Hi, @Chiara_Tambone !!

I tried using code like the following, and it might work well.

If you’re unsure how to use it, feel free to ask me again. :innocent:

(Tips) For “targetSlideIndex”, please enter the index of the last slide in your case. Also, make sure to set “slideChangeDuration“ to the same value as the one configured in the Wix Studio editor UI.

$w.onReady(function () {

    $w("#slideshow1").onChange(
        createSlideshowHandler(["#box0", "#box1", "#box2"], 2, 1000, ["#box0"], ["#slideshowButton1", "#slideshowButton2"])
    );

});

function createSlideshowHandler(allElements, targetSlideIndex, slideChangeDuration, targetSlideVisibleElements, slideShowButtons) {
    let isFirstRun = true;

    return (event) => {
        if (isFirstRun) return isFirstRun = false;

        slideShowButtons.forEach(id => $w(id).disable());

        const currentIndex = event.target.currentIndex;
        const fadeDuration = Math.floor(slideChangeDuration / 2);
        const fadeOptions = { duration: fadeDuration };

        allElements.forEach(id => $w(id).hide("fade", fadeOptions));

        const toShow = (currentIndex === targetSlideIndex) ? targetSlideVisibleElements : allElements;

        setTimeout(() => toShow.forEach(id => $w(id).show("fade", fadeOptions)), fadeDuration + 300);
        setTimeout(() => slideShowButtons.forEach(id => $w(id).enable()), slideChangeDuration + 300);

    };

}