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?
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 
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 
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.
Awesome! Whenever you can please share a link to the page and I will see what we need to do 
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? 
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 
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?
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.
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.
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?
Btw. thanks a lot for such fast and helpful responses, really appreciate it, Luis 
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
Oh and you are very much welcome! Happy to help on any issue you have 
Hey Luis!
Could you help me configure the CMS nest with this. I don’t know how to set it up correctly.
Hey @adem.srndic! This video explains really well how to set CMS Nest up. Please take a look and let me know if you have any questions!
It worked!! 
You mentioned that I should also add the attribute with the anchor link data for you to work on the code? Can you help do that?
Sure! So here is what I need you to do:
-
Convert the slider divs to links
-
Add a dynamic Attribute to these links where the value is the name of the item, this is done by clicking on the purple dot and selecting the name field.
The name of the attribute can bedata-section -
You currently have the ID “beliebt” set on the collection wrapper shown below. Please remove it to avoid any bugs
-
Add the name of the item as the ID of each item wrapper so we can scroll to it
All set! I can work on the code while you do this so I can test once published and share with you