Question:
I am strugling to edit the design separately on each slides in Wis Studio because there is only Slideshow repeater.
Product:
Wix Studio
What are you trying to achieve:
I want a different design on each slides, and text position , animation separately.
What have you already tried:
Non of tutorials provide what I am seeking.
Additional information:
it was existing on the previous Wix / Editor X but it suddenly disaapear ed on Wix Studio. How can I make the individual design containers sliding as set?
Did you find the answer? I am looking for the same.
You could use a flexbox, set it to slides and then add some code to automatically change the slides. You can then edit each slide to look how you want. Not a perfect solution, but may work for what you need.
$w.onReady(function () {
let boxes = [$w("#box1"), $w("#box2"), $w("#box3")]; // replace with your box IDs
let currentIndex = 0;
setInterval(() => {
// Hide the current box
boxes[currentIndex].collapse();
// Move to the next box
currentIndex = (currentIndex + 1) % boxes.length;
// Show the next box
boxes[currentIndex].expand();
}, 3000); // change boxes every 3 seconds
});
Someone said using Flexbox can be a alternative solution but it doesn’t do the automatic slideshow. so it might be needing a coding. that way is not the concept of the latest platform we know.
Thank you million Mate. I am not capable in coding with no experience. but I will try to input this code by asking to Chat GPT
Would you let me know where, how to input these codes exactly?
The code needs to go on the page where the slideshow is. If you have not used Velo before you need to enable Developer tools. To explain it all exactly where to put it and how to edit it to suit your site is very consuming if you do not know coding. Have a read here and you may get an understanding of where to input code.
Thank you a Million. I studied the link you provided and got this work. Your explanation was the most directive to the goal. Appreciate. but I realized that to create the sliding motion that I want , I need to study more about this *CSS? code, As I need to slide them looping in order like #Box1 → #Box2 → #Box3 → #Box1 … , and when the user click the box it shall be stopped looping and stay on that slide. if user want to see other slides, then the user need to click the left/right arrow button to see. and then uless user doesn’t click the slide box, it will continue looping. Will this order in code be possible though? I hope Wix Studio return this function that was existed in the previous platforms.
I modify to this to realize the above idea, it slide automatically but at the same time debug message on the dev. console.
If you see any issue, please advise me. Thank you.
[CSS code]
$w.onReady(function () {
let boxes = [$w(“#box5”), $w(“#box6”), $w(“#box7”)];
let currentIndex = 0;
let intervalId = null; // Interval ID to stop the loop
// Start the loop
intervalId = setInterval(() => {
// Hide the current box
boxes[currentIndex].collapse();
// Move to the next box
currentIndex = (currentIndex + 1) % boxes.length;
// Show the next box
boxes[currentIndex].expand();
}, 3000); // change boxes every 2 seconds
// Add click event listener to each box
boxes.forEach(box => {
box.onClick(() => {
// Stop the loop
clearInterval(intervalId);
// Show the clicked box
box.expand();
});
});
// Add click event listener to left and right arrow buttons
$w("#leftArrow").onClick(() => {
// Stop the loop
clearInterval(intervalId);
// Move to the previous box
currentIndex = (currentIndex - 1 + boxes.length) % boxes.length;
// Show the previous box
boxes[currentIndex].expand();
});
$w("#rightArrow").onClick(() => {
// Stop the loop
clearInterval(intervalId);
// Move to the next box
currentIndex = (currentIndex + 1) % boxes.length;
// Show the next box
boxes[currentIndex].expand();
});
});
Why the slideshow require Coding? After all, it was a feature that was available in the original Edit X/Wix. Wouldn’t it be more efficient to bring it back?
1 Like
Sure, but this question goes to Wix.