About Using Flexbox Slider

Ask the community
,
1

Hello

Due to the excessive price increases in paid slider applications, I watched content on creating sliders using flexbox or multistatebox, which I found online. I noticed that there is a significant gap in this area. Now, I would like to explain my problem to you.

I added a flexbox to my homepage and changed its display mode to slides. I removed the scrollbar.

I am adding three items inside the flexbox and changing their IDs to slider1, slider2, and slider3.

What I want to achieve is for these items to smoothly transition in and out, switching every 4 seconds after the homepage has finished loading.

Here’s where I get stuck: before adding the smooth transition code, I manage to make the basic functionality work without effects. But whenever I add smooth transitions, the 2nd and 3rd sliders are not visible. I received support through AI for all of the code, but I haven’t been able to resolve the issue.

Could you please help me?

Here is the sample code:

$w.onReady(function () {
let currentIndex = 0; // Starting index
const sliders = [‘#slider1’, ‘#slider2’, ‘#slider3’]; // The IDs of the items to be used
const duration = 4000; // 4 seconds

// Show the first item
$w(sliders[currentIndex]).show();

// Function definition
function changeSlide() {
    // Hide the current item
    $w(sliders[currentIndex]).hide("fade", { duration: 500 })
        .then(() => {
            // Move to the next item
            currentIndex = (currentIndex + 1) % sliders.length; // Update the current state
            // Show the next item
            $w(sliders[currentIndex]).show("fade", { duration: 500 });
        });
}

// Start the automatic transition
let intervalId = setInterval(changeSlide, duration);

// Stop the automatic transition when the mouse is over the element
$w("#box65").onMouseIn(() => {
    clearInterval(intervalId); // Stop the automatic transition
});

// Restart the automatic transition when the mouse leaves the element
$w("#box65").onMouseOut(() => {
    intervalId = setInterval(changeSlide, duration); // Restart the automatic transition
});

});