Slider Interaction with buttons

Is there any way to achieve the interaction like this when I click the button next to the slider so the slider can jump to the designated slide ? or do i require custom js for this one ?

below is my preview link:

https://preview.webflow.com/preview/gpayments?utm_medium=preview_link&utm_source=designer&utm_content=gpayments&preview=b91530044fae7a8afaf8bfe65040df44&workflow=preview

You’ll have to use custom code for that. However, it’s not that complicated if you know your way around js.

Just paste this into your page settings right before the closing of the </body> tag

<script>
  let i = 0;
  document.querySelectorAll(".gp-button-light").forEach(button => {
    button.setAttribute("index", i++);
    button.addEventListener("click",e => {
      setActiveClient(button.getAttribute("index"));
    });
  });
</script>

Hope this solves your problem, cheers!

thanks for your reply @bavshehata.

I am not very familiar with Js but will definitely give it a go (still stuck now).

here is my preview links. I tried to paste your code but it’s not working at the moment.

https://preview.webflow.com/preview/gpayments?utm_medium=preview_link&utm_source=designer&utm_content=gpayments&preview=1af70ba5ce0a9a2842ed9fcf89fadccb&pageId=60c03abc9ee106876ee6423a&workflow=preview

Hello @jaysonhsiao

I know this is from a while ago, but I just wanted to chime in with another no-code option cloneable that might be relevant here. I’d be curious to know what you ended up doing here.

If you want something really easy, a reformatted tabs element might do. Here is a link to a cloneable that might point you in the right direction. It isn’t exactly what you are looking for, but with some reformatting of the UI and the removal of some of the animations, it should be similar. You could probably do without the dynamic background image and input whatever you’re trying to display into the wwd-tabs-content element. I believe you should be able to reformat each tab button to be whatever shape you’re interested in creating.

As for the two arrow buttons (to move to the next item regardless of what is selected), you might need to insert some custom code. I can think of a few JS libraries that do that (one that immediately comes to mind is https://swiperjs.com/. I can help set that up if you are still looking for something like that. In any case, a hybrid tab-slider is a pretty powerful tool to use.

I know this is a pretty basic fix, but the customizability of native elements in Webflow is pretty extensive. If you want to see some other slider/tab variants, here is a link to a blog I wrote (not to self-promote – just might be helpful for anyone else reading this.