# Does Slider component allow for lazy load

**URL:** <https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288>\
**Category:** Slider\
**Created:** [August 15, 2024, 4:36pm UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288 "2024-08-15T16:36:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chad](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/chad/32/3374_2.png) [@Chad](https://forum.finsweet.com/u/Chad)\
**Post date:** [August 15, 2024, 4:36pm UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288/1 "2024-08-15T16:36:06Z")

</div>

Title: [Swiper API](https://swiperjs.com/swiper-api#lazy-loading)

---

<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:** [August 15, 2024, 8:06pm UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288/2 "2024-08-15T20:06:56Z")

</div>

Hey @Chad! I have asked the team for clarification on both of the threads you’ve opened. I’ll get back to you 😉

---

<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:** [August 16, 2024, 10:58am UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288/3 "2024-08-16T10:58:17Z")

</div>

Hey @Chad! Anything available on Swiper.js API docs is supported.

This includes adding the `loading="lazy"` option.

---

<div class="post-metadata">

**Author:** ![Chad](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/chad/32/3374_2.png) [@Chad](https://forum.finsweet.com/u/Chad)\
**Post date:** [August 16, 2024, 5:59pm UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288/4 "2024-08-16T17:59:46Z")

</div>

how can i modify/extend the finsweet component to use this?

---

<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:** [August 19, 2024, 11:35am UTC](https://forum.finsweet.com/t/does-slider-component-allow-for-lazy-load/3288/5 "2024-08-19T11:35:02Z")

</div>

@Chad, as the Swiper documenation states:

> To use lazy loading, we just need to set `loading="lazy"` on images and add preloader element.

Or you can use the Components API to manipulate the `sliderInstance` with the [Swiper.js API](https://swiperjs.com/swiper-api)

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

```