Slider Controller Isn't Working - Active Item Stays the Same

Finsweet Components Slider
1

Description

Hi there! I’ve spent all day trying to have a functional slider setup for three components. It seems to work for the first click of the navigation arrow, but after that, it just stops. I’ve looked in inspect and after the first click to move to the next item, the “active” class never changes: it just works once and then you can’t even select the previous arrow.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Created three separate sliders (portfolio-slider, portfolio-slider-cards, portfolio-slider-info)
  2. Make “portfolio-slider” the controller for “portfolio-slider-cards”
  3. Make “portfolio-slider-cards” the controller for “portfolio-slider-info”

Additional Context

  • Browser: Chrome
  • Device: Desktop, Apple
2

Hey @jozlyn!

I think I know what’s happening with your slider controller setup. The issue seems to be in how your three sliders are connected to each other in sequence (portfolio-slider → portfolio-slider-cards → portfolio-slider-info). After the first interaction, the active class management gets confused.

Here’s what I recommend:

Instead of chaining your controllers together, use your main slider as the controller for both secondary sliders:

  • Make portfolio-slider control both portfolio-slider-cards AND portfolio-slider-info directly
  • Remove any controller relationship between portfolio-slider-cards and portfolio-slider-info

This approach is more reliable because it avoids cascading controller relationships that can get out of sync with each other.

To implement this, just update your Finsweet Components Slider settings to have portfolio-slider as the controller for both other sliders, and remove any controller settings from portfolio-slider-cards.

You might also want to check that:

  • All three sliders have unique fs-slider-element=“instance” wrappers
  • Your controller settings match what I described
  • There’s no custom JavaScript interfering with the sliders

If you need any custom code solutions or if this doesn’t fix your issue, @Support-Luis or @Support-Pedro can help you further!

3

Hi there! Thank you for your help. However, I’m still not able to achieve what I’m looking for.

Here are the steps I took:

  • I disconnected the connection between “portfolio-slider-cards” and “portfolio-slider-info”
  • I tried to connect “portfolio-slider” to “portfolio-slider-info” but it only had room for one connection.
  • So I restarted the process with only two sliders, “portfolio-slider“ (now with the cards shown on the top of the screen) and “project-info“ (renamed so there’s no overlap with naming convention in JS).
  • I made the controller connection from “portfolio-slider“ → “project-info“
  • I made sure both sections have unique wrappers
  • No other JavaScript has been implemented
  • Published

And I’m having the same issue as before. The “portfolio-slider“ section is moving from item to item in order, while “project-info“ is not able to move forward. But if you go backwards with the previous button, the “project-info“ slides will go backwards, just not forward.

If there’s any other advice or help I could get, it would be really appreciated! @Support-Luis @Support-Pedro

The current iteration is still on this link here: https://testing-site-jzlyn-cr-v2.webflow.io/

4

Hey @jozlyn! I’ve been having a look and it seems that this solution will require some custom code.. I will try to implement it and get back to you as soon as I have something working!

Just to clarify, one single navigation should control all sliders on the page?

5

That’s perfect, thank you! And yes one single navigation should control all sliders on the page! @Support-Luis

6

Hey @Support-Luis! Is there any update on this???

7

Hey @jozlyn! I’m afraid I couldn’t make the setup work with Finsweet Components.

Would plain Swiper JS work for you?

Something like this snippet should achieve what you are looking to do

const paginationEl = document.querySelector('.shared-pagination');

const commonConfig = {
  loop: false,
  pagination: {
    el: paginationEl,
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="${className}">${index + 1}</span>`;
    },
  },
  on: {
    slideChange(swiper) {
      // Sync all sliders when one changes
      syncSliders(swiper.realIndex);
    },
  },
};

const swiper1 = new Swiper('.slider-1', commonConfig);
const swiper2 = new Swiper('.slider-2', commonConfig);
const swiper3 = new Swiper('.slider-3', commonConfig);

const sliders = [swiper1, swiper2, swiper3];

function syncSliders(index) {
  sliders.forEach(swiper => {
    if (swiper.realIndex !== index) swiper.slideTo(index);
  });
}