ReleaseOnEdges for component slider

Attributes
1

Hi @Support-Luis,

Thanks for responding on slack, I need further help with the callback function for swiper instances.

Here’s the code I added to have the releaseOnEdges parameter for my slider instances:

window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'slider',
  (sliderInstances) => {
    console.log('Slider Successfully loaded!');

    // Access the first slider instance from the array
    const [sliderInstance] = sliderInstances;

    // Check if the instance exists
    if (sliderInstance) {
      console.log('Slider instance found, configuring releaseOnEdges.');

      // Set the releaseOnEdges and enable mousewheel
      sliderInstance.params.mousewheel = {
        enabled: true,           // Enable the mousewheel module
        releaseOnEdges: true,    // Enable release on edges
      };

      // Add event listener for slide change
      sliderInstance.on('slideChange', function () {
        console.log('Slide changed to index:', sliderInstance.activeIndex);
      });

      // Update the swiper instance to apply new parameters
      sliderInstance.update();
    } else {
      console.error('No slider instance found!');
    }
  },
]);

Currently it is not working.

2

Hey,

Nevermind, figured it out with help from chatGPT!

window.fsComponents = window.fsComponents || [];
window.fsComponents.push([
  'slider',
  (sliderInstances) => {
    console.log('Slider Successfully loaded!');

    // Loop through each sliderInstance
    sliderInstances.forEach((sliderInstance) => {
      const sliderElement = sliderInstance.el; // Get the slider's root element

      // Use 'closest' to find the nearest parent with 'fs-slider-instance' attribute
      const fsSliderInstance = sliderElement.closest('[fs-slider-instance]')?.getAttribute('fs-slider-instance');

      // Log the value of fs-slider-instance
      console.log('fs-slider-instance value:', fsSliderInstance);

      // Check if the slider has the 'fs-slider-instance' attribute with value 'why_text' or 'why_image'
      if (fsSliderInstance === 'why_text' || fsSliderInstance === 'why_image') {
        console.log(`Configuring releaseOnEdges for slider with fs-slider-instance: ${fsSliderInstance}`);

        // Set the releaseOnEdges and enable mousewheel only for these sliders
        sliderInstance.params.mousewheel = {
          enabled: true,           // Enable the mousewheel module
          releaseOnEdges: true,    // Enable release on edges
        };

        // Update the swiper instance to apply new parameters
        sliderInstance.update();

        // Add event listener for slide change
        sliderInstance.on('slideChange', function () {
          console.log(`Slide changed to index: ${sliderInstance.activeIndex} on slider with fs-slider-instance: ${fsSliderInstance}`);
        });
      } else {
        console.log(`Skipping configuration for slider with fs-slider-instance: ${fsSliderInstance}`);
      }
    });
  },
]);
1 Like
3

Hey @joseph.bongrand! Great to hear! And thanks for sharing the code! :muscle: