How to make a vector image follow (slide) on click in vertical buttons

Discussion Ask a question
, ,
1

Question:
I´m a newby learning to code. How can I make a vector image (arrow) follow the button click. I want to recreate ussilica.com design. I also would like to recreate the text changing when clicking a different buttom.

2

for the vector image try this

$w.onReady(function () {
    $w('#button1').onClick(() => {
        $w('#vectorImage').show('slide');
    });
});

for the text try this

$w.onReady(function () {
    $w('#button2').onClick(() => {
        $w('#myText').text = "New text content";
    });
});

or you could possibly build a very similar design in Studio with no code. Using animations to fad in and out elements.

3

thank you

unfortunaly the vector one didnt work.

I was able to conect the button to the slide. using this code

$w(“#button20”).onClick((Event) => {
$w(‘#slideshow1’).changeSlide(0);
})
$w(“#button21”).onClick((Event) => {
$w(‘#slideshow1’).changeSlide(1);
})
$w(“#button22”).onClick((Event) => {
$w(‘#slideshow1’).changeSlide(2);
})

But the vector image (Arrow) is not following the click with the codes I tried so far. I’m trying to get the arrow in a set position next to each button when I click, so the vector appear next to the button/slide to let the person know in which button/slide she is on as a guide

(I apologise for my english Brazilian here)

4

You will need multiple vector images to show and hide on each button click.

$w.onReady(function () {
    $w('#button20').onClick(() => {
        $w('#vectorImage1').show('slide');
        $w('#vectorImage2').hide();
        $w('#slideshow1').changeSlide(0); // Change to slide 0
    });

    $w('#button21').onClick(() => {
        $w('#vectorImage2').show('slide');
        $w('#vectorImage1').hide();
        $w('#slideshow1').changeSlide(1); // Change to slide 1
    });
});
5

Why not using Wix-Animations ?

1 Like
6

I did suggest this to

1 Like
7

Thank you for the suggestion. I’m in a learning curve on wix this is my firts project there

I can´t seem to figure out how to create this with the animation. Because I have to conect the vector to the slide. And the options available with no code are different.

I was able to create a horizontal tab with the names instead of the icons. Was the closest I got. But it is not a slide so doesn’t change by itself as i wanted