Finsweet Component Sliders not Looping

Finsweet Components Slider
1

There a re total 4 sliders build using Finsweet components and they all are controlling each other, I’ve set all of them to loop. out of 4 sliders 2 are inside of the navigation buttons and those sliders are not looping.
Here’s the read only link
https://preview.webflow.com/preview/finsweet-components---slider?utm_medium=preview_link&utm_source=designer&utm_content=finsweet-components---slider&preview=18151cfb5c0abf9d13009dfc2c4b75f1&workflow=preview

2

Hey @hadiaslam9999 - thanks for checking out the app and cool build!

I couldn’t figure out EXACTLY what is causing the issue but I suspect your controllers are not configured properly. It’s difficult to debug at the moment because Webflow doesn’t allow me to launch the app from a Preview Link.

So I went ahead and mocked up a version close to what you are trying to achieve here: Controller

Here is a walkthrough of the setup: Slider Setup and Customization 🎨 | Loom

The main difference in my build is that I only use two sliders: back and front. The front slider is the “controlling” slider and is set to control the “back” instance. Back has allowTouchMove and followFinger set to false so the user cannot interact with it.

I used the API snippet (check the API tab in the app) and asked chatGPT to apply the active slide background color to elements with front_button class. So the button color is controlled via the javascript API and they are not their own sliders.

<!-- Finsweet Slider API -->
window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'slider',
  (sliderInstances) => {
    console.log('slider Successfully loaded!');
    
    // The callback passes a sliderInstances array with all the sliderInstance instances on the page.
    const [sliderInstance] = sliderInstances;

    // Each sliderInstance is a Swiper object - Now you can interact with Swiper's APIs.
    // https://swiperjs.com/swiper-api#events
    sliderInstance.on('slideChange', function () {
      console.log('slide changed');
      
      // Get the active slide
      const activeSlide = sliderInstance.slides[sliderInstance.activeIndex];
      
      // Get the background color of the active slide
      const activeSlideBackgroundColor = window.getComputedStyle(activeSlide).backgroundColor;
      
      // Select all elements with the class 'front_button'
      const frontButtons = document.querySelectorAll('.front_button');
      
      // Apply the active slide's background color to each 'front_button'
      frontButtons.forEach(button => {
        button.style.backgroundColor = activeSlideBackgroundColor;
      });
    });
  },
]);
1 Like
3

Thank you so much Web bae🙏