Sideways Scrollable Filter

Hey guys!

I wanted to ask if it is possible to create a filter like this:

To make it scrollable and to always show the currently selected filter at the left end?

image

Kind regards,
Adem

Hey @adem.srndic! The layout is possible, however the example you’ve shared does not filter the list. It only scrolls the page to the section that contains the selected category.

The example you’ve shared is a Swiper slider that sets the active slide to the left and each slide has a #catX anchor link.

We could try reproduce this with CMS Slider, CMS Filter and Mirror Click Events if you want to give it a shot :thinking:

You’re right!

Are you guys using SwiperJS in your solution, or do you have a self made solution with Attributes for this?

Yes, I would love to give it a shot :slight_smile:

Where do we start?

Hey @adem.srndic!

We use SwiperJS for out Slider Component → CMS Sliders in Webflow - Finsweet Components

We also have the CMS Slider Attribute → CMS Slider for Webflow - No-code using Attributes

In my opinion, the Slider Component will be easier to handle as we have access to the SwiperJS API.

You could also try to recreate their setup by setting SwiperJS from scratch.

Let me know which tool you;d like to use!

I will take your recommendation and would like to use your slider component. :slight_smile:

Awesome! Whenever you can please share a link to the page and I will see what we need to do :wink:

Here is the link:

https://pizza-solo.webflow.io/speisekarte

This would be the reference for how the slider should approx. look like: https://www.lieferando.at/speisekarte/pizza-solo-linz-2

Could you record a quick loom showing which list should we filter? Also could you share a read-only link? :pray:

Here is the read-only link!
https://preview.webflow.com/preview/pizza-solo?utm_medium=preview_link&utm_source=designer&utm_content=pizza-solo&preview=1b4c2f25be75cfcca719c44863ee0d13&pageId=6711216e4c92895b6e547f55&workflow=preview

Is it possible to maybe firstly just recreate it like at Lieferando. So where the slide just scrolls it to the specific section. I think for the beginning this would be easier and the client would also be happy with the solution for now together with the search bar function.

Sure!

I see you’ve used a static slider. You’ll need to add a link to each slide and link it to the section of the page you’d like to scroll to when this is clicked.

Similar to the following image.

This should have the page scrolling to the selected “Category” on the slider

So, I have successfully done that.
On desktop the slider is not working, on mobile it is though.
Also how can I put the prev / next slider left and right to the slider.

And how can i make that, when i click on next, it only goes one slider on. And that the active slider is always on the left?

Thanks in advance!!

This would be with CSS, which I’m afraid is not my specialty :sweat_smile:

As long as you don’t move the elements outside the fs-slider-instance="fs-slider-cms" element, you can style and move the elements as you wish.

And for this, I’m afraid I don’t follow the first part… but the second should also be achievable by CSS

Hey Luis, thanks for the tips! I am almost done with it. The only thing missing is, that the slider sets the active slide to the elft and that every slide has a #catx anchor link. How should I go about this?

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

Hey @adem.srndic! I see you moved the items to be part of a collection list I’m afraid we can’t set the anchor link natively. If we try to do so, all items will scroll to the same section. :thinking:

If you were to wrap the elements in a link block, we could write a script that updates the #catx link if we add it to the elements with an attribute like data-anchor = DYNAMIC-ATTRIBUTE-VALUE

For the styling, let me get back to you on this. :wink:

Yes, if that is the best approach to this, then this would be much appreciated.

Can I also combine all this with CMS Nest so that more than 5 items are shown? :slight_smile:

Btw. thanks a lot for such fast and helpful responses, really appreciate it, Luis :grin:

Yup! CMS Nest can be used here to nest more than 5 items.

If you’d like please add the CMS Nest setup and add the attribute with the anchor link data. I will work on the code but I need the attribute to be present to test it out :slight_smile:

Oh and you are very much welcome! Happy to help on any issue you have :muscle: