Sideways Scrollable Filter

Attributes
21

I completed what you told me :slight_smile:

https://preview.webflow.com/preview/pizza-solo?utm_medium=preview_link&utm_source=designer&utm_content=pizza-solo&preview=1b4c2f25be75cfcca719c44863ee0d13&pageId=6711216e4c92895b6e547f55&locale=en&workflow=preview

22

Awesome! Thanks. So this is the most basic script that should accomplish what you are looking for, clicking an item and the page scrolling to the desired section

<script>
  window.onload = function () {
    console.log('Window has loaded!');
     // Select the items on the slider and set the href attribute for each 
    document.querySelectorAll('.fs-slider-cms_slide a[data-section]').forEach((link) => {
      link.setAttribute('href', `#${link.getAttribute('data-section')}`);
    });
  };
</script>

Please test and let me know what changes need to be made :pray:

23

The scrolling does work but there is an issue that it doesn’t stop at the heading, I think that is because I have a sticky header and the slider instance is also sticky. Is there a workaround for this?

And also when I click on a filter it shows a black border around the items.

24

Hey Luis! It is also possible to hire you guys to recreate the slider to make it work like the desired slider on the “Lieferando” page?

I would love that :slight_smile:

25

Hey @adem.srndic! I am not 100% sure on what is adding the border to the item but I do see this style added

a:-webkit-any-link:focus-visible {
    outline-offset: 1px;
}

CSS is not my speciality but ChatGPT says we can prevent this by adding this to the style sheet

:focus-visible {
  outline: none; /* Remove the default focus outline */
}

The issue of stopping could be solved by some tweaking of the script I shared above by adding an offset.

And regarding this

It is also possible to hire you guys to recreate the slider to make it work like the desired slider on the “Lieferando” page?

I’ve sent you a DM :slight_smile: