A clean and minimal website for an engineering company from Russia. Using the Wix Code, I created the original slideshow on the home page. The website also uses several databases for sections of projects and vacancies. On the project page using the code I created the custom slideshow. And a bit animation))
https://www.unidraft.com/en
Great respect for the Wix Code Team for helping solve problems in this forum.
many thanks
In this example I added text and two arrows to each slide.
Then for each arrow I added an event "onClick" and code (standard arrows for the slider I turned off)
export function buttonOneNextEn_click() { $w('#columnTwo').show("FadeIn"); $w('#columnOne').hide("FadeOut"); $w("#slideShowEn").changeSlide(1); }
My code is a little more complicated, but basically everything is right. I added a function stop event when the mouse pointer is placed on the arrow.
when click a change slide arrow, text and image changed in the same time. How can you do that?
Hi,
This is Box Slideshow. Each slide contains text.
hi Eugene M,
Can you show me what sldeShowRu is?
Hi Cesar,
In this project I didn't connect the database collection on the home page, as the projects are not planned to be changed in the future. Although this could easily be done using tags.
To create a full-screen slideshow I added three strips:
#columnStripOne
#columnStripTwo (make "Visible on load")
#columnStripThree (make "Visible on load")
and added a slideshow Wix, in which I created three identical slides.
Next for each strip I added an event "onViewportEnter" (more here)
export function columnStripOne_viewportEnter() { setTimeout(() => { $w('#columnStripTwo').show("FadeIn"); $w('#columnStripOne').hide("FadeOut"); $w("#slideShowRu").changeSlide(0); // change slide }, 4800); }
export function columnStripTwo_viewportEnter() { setTimeout(() => { $w('#columnStripThree').show("FadeIn"); $w('#columnStripTwo').hide("FadeOut"); $w("#slideShowRu").changeSlide(1); }, 4800); }
export function columnStripThree_viewportEnter() { setTimeout(() => { $w('#columnStripOne').show("FadeIn"); $w('#columnStripThree').hide("FadeOut"); $w("#slideShowRu").changeSlide(2); }, 4800); }
Slide change is performed by the changeSlide
As you can see everything is simple))
When the strip becomes visible and the function starts. The result is an infinite slide show.
My code is a little more complicated, but I think you understand the principle. For example, I went a little further and added a function stop event when the mouse pointer moves over a specific part of the screen. I asked about this in this topic.
I also created an anchor and do not allow the screen to scroll down the page.
When I open the website menu, I hide some elements so that they do not appear when the site goes to another page. Read more here.
Very nice site!
great, Could you share how you create it? How did you create slides using collections? How did you animate it? Could you please show the code?
Thanks