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))
Great respect for the Wix Code Team for helping solve problems in this forum.
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
Very nice site!
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.
hi Eugene M,
Can you show me what sldeShowRu is?
when click a change slide arrow, text and image changed in the same time. How can you do that?
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.
many thanks
Hi Eugene,
The websites project page has buttons at the top (All, Residential, Offices, etc.)
When the buttons are clicked, they remain highlighted red and the gallery is filtered to show only whatever the button is specifying ie. when residential is clicked, the residential button is red and the gallery filters to only show residential projects.
I want to replicate this on my website but I have no idea how you have done this.
Could you please let me know?
Thanks
@davimak11 This is a very old post you are commenting on. Please repost your question in a new post so more people will see it. Clearly explain what you are trying to do and what you want to accomplish.
@davimak11 Hi! It’s simple. The standard button has 3 states: enabled, hover and disabled. You can disable the button when clicked.
export function button1_click() {
$w("#button1").disable();
$w("#dataset1").setFilter(wixData.filter().contains("tags","office"));
}
You need to customize your own design for each button state.