# ReleaseOnEdges for component slider

**URL:** <https://forum.finsweet.com/t/releaseonedges-for-component-slider/3568>\
**Category:** Attributes\
**Tags:** component-slider\
**Created:** [October 7, 2024, 12:11pm UTC](https://forum.finsweet.com/t/releaseonedges-for-component-slider/3568 "2024-10-07T12:11:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joseph.bongrand](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/joseph.bongrand/32/2145_2.png) [@joseph.bongrand](https://forum.finsweet.com/u/joseph.bongrand)\
**Post date:** [October 7, 2024, 12:11pm UTC](https://forum.finsweet.com/t/releaseonedges-for-component-slider/3568/1 "2024-10-07T12:11:29Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![joseph.bongrand](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/joseph.bongrand/32/2145_2.png) [@joseph.bongrand](https://forum.finsweet.com/u/joseph.bongrand)\
**Post date:** [October 7, 2024, 12:22pm UTC](https://forum.finsweet.com/t/releaseonedges-for-component-slider/3568/2 "2024-10-07T12:22:21Z")

</div>

Hey,

Nevermind, figured it out with help from chatGPT!

```auto
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}`);
      }
    });
  },
]);

```

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [October 7, 2024, 4:17pm UTC](https://forum.finsweet.com/t/releaseonedges-for-component-slider/3568/3 "2024-10-07T16:17:53Z")

</div>

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