I want to use the slider in the middle of a page and use mouse scroll toadvnace the slides, when the slider gets to the last slide, I want it to advance to the next section on the page.
So page layout would be:
Section (static content)
Slider
Section (Static content)
When I set it up this way and get to the slider, it does advance the slides using mouse scroll but it does this immediately when the mouse hits the slider. Is there a way to use sticky and have the slider start advancing only whne the slider hits the sticky point and then advance when it gets to the last slide oris this not possible.
Site URL
Required: Please provide a staging/production URL where we can see the issue
I only want to the slider to work when the slider hits the top of the page and I need it to advance to the next section after the last slide and then work in reverse when scrolling back to the top of the page
Actual Behavior
It gets stuck on the slider and will not advance to the next section
Video/Screenshots
Required: Please provide a short screen recording showing the issue
This is a really sophisticated UX pattern you’re building — a scroll-driven slider that sticks at the top of the viewport, advances slides via mouse scroll, and then releases to the next section after the last slide.
Unfortunately, this behavior isn’t natively supported by the Finsweet Slider component. The fs-slider doesn’t have built-in attributes for scroll-driven navigation, sticky scroll activation, or auto-release after the last slide.
Custom Development Path
Since the Slider is built on Swiper.js, you can achieve this through custom JavaScript using Swiper’s API. The Finsweet Slider exposes full Swiper.js API access through callbacks. You’d need to:
Apply position: sticky to your slider section wrapper with CSS
Use Swiper’s mousewheel module via the slider callback
Listen for scroll events, detect when the slider is in the sticky state, and programmatically advance slides via Swiper’s API
Detect when you’ve reached the last/first slide and release the sticky scroll lock
Here’s the callback structure you’d use as a starting point:
<script>
window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
'slider',
(sliderInstances) => {
const [sliderInstance] = sliderInstances;
// Each sliderInstance is a Swiper object
// You can interact with Swiper's APIs here
// Your custom scroll-driven logic would go here
},
]);
</script>
The Product Slider cloneable on the Finsweet site mentions “a unique custom scroll animation” — that might give you some inspiration, though I don’t have access to its implementation details.
Alternative Approach
If you’d prefer to avoid custom JavaScript, you could achieve a similar visual effect using CSS scroll-snap with sticky sections instead of a slider component. This would be architecturally different (no fs-slider involved) but potentially simpler depending on your needs.
This goes beyond standard fs-slider features and requires custom development. I’d like to loop in @Support-Luis or @Support-Pedro to see if they can provide more specific guidance on achieving this scroll-driven pattern.
Could you let me know if you have JavaScript development capability on your end, or if you’d need guidance on finding a developer to help implement this?
