# Smart Lightbox inside slider

**URL:** <https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890>\
**Category:** General\
**Created:** [September 8, 2023, 10:36am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890 "2023-09-08T10:36:35Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 8, 2023, 10:36am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/1 "2023-09-08T10:36:35Z")

</div>

Hello there! I’m trying to use the smart lightbox attributes to open a fixed lightbox inside the cards of a slider but it doesn’t seem to work.

My question is, can I use this solution within a CMS collection wrapped in a Swiper.js slider as I’m doing now?

Here is the read-only link:  
[https://preview.webflow.com/preview/chamber-cardio-2023?utm\_medium=preview\_link&utm\_source=designer&utm\_content=chamber-cardio-2023&preview=f9d541aeccc90c4f1738c47f1bdc540d&workflow=preview](https://preview.webflow.com/preview/chamber-cardio-2023?utm_medium=preview_link&utm_source=designer&utm_content=chamber-cardio-2023&preview=f9d541aeccc90c4f1738c47f1bdc540d&workflow=preview)

Thanks!

---

<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:** [September 8, 2023, 4:33pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/2 "2023-09-08T16:33:01Z")

</div>

hey @marco! can you share your live site password?

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 9, 2023, 4:16pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/3 "2023-09-09T16:16:56Z")

</div>

Hi @Support-Luis! It is cardio2023

---

<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:** [September 10, 2023, 6:59pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/4 "2023-09-10T18:59:51Z")

</div>

Hey @marco! Can you try initializing Swipr like this?

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'smartlightbox',
    (lightboxInstances) => {
      const swiper = new Swiper('.swiper', {
        /*mousewheel: {invert: true,},*/
        // Optional parameters
        direction: 'horizontal',
        slidesPerView: 3.5,
        loop: false,
        spaceBetween: 24,
        grabCursor: true,
        navigation: {
          nextEl: '.swiper-nav.next',
          prevEl: '.swiper-nav.prev',
        },
        breakpoints: {
          1: {
            slidesPerView: 1.1,
            spaceBetween: 16,
          },
          650: {
            slidesPerView: 2.1,
            spaceBetween: 16,
          },
          991: {
            slidesPerView: 3.5,
            spaceBetween: 24,
          },
        },
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 11, 2023, 9:33am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/5 "2023-09-11T09:33:42Z")

</div>

Hey @Support-Luis, things are getting better but when I switch to the other tab it seems to break again. Do you think the tabs component is causing this problem?

---

<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:** [September 11, 2023, 12:08pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/6 "2023-09-11T12:08:27Z")

</div>

@marco, the tab component can definitely be causing some issues. I’ve tried resetting the attribute on tab change but that does not seem to be working reliably.

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 11, 2023, 12:56pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/7 "2023-09-11T12:56:46Z")

</div>

@Support-Luis yeah that’s what I thought. Do you think using the CMS filters solution instead of a tab component  
would help?

---

<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:** [September 11, 2023, 1:09pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/9 "2023-09-11T13:09:18Z")

</div>

Yes! We can have more options to reinitiate the scripts

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 11, 2023, 1:35pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/10 "2023-09-11T13:35:05Z")

</div>

@Support-Luis I implemented it on the homepage instead of the tabs component. The filters are working but the lightboxes are broken again. Do we need to change the way we initialise the code?

---

<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:** [September 11, 2023, 5:09pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/11 "2023-09-11T17:09:38Z")

</div>

@marco try using this script for the Lightbox in your `<head>`

```auto
<!-- [Attributes by Finsweet] Smart Lightbox -->
    <script
      defer
      fs-attributes-preventload="true"
      src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"
    ></script>

```

And this in your `</body>`

```auto
<script>
  window.fsAttributes = window.fsAttributes || [];

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      window.fsAttributes.smartlightbox.init();

      const [filterInstance] = filterInstances;

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        window.fsAttributes.smartlightbox.init();
      });

      window.fsAttributes.push([
        'smartlightbox',
        (lightboxInstances) => {
          console.log('ligthbox initiated');
          const swiper = new Swiper('.swiper', {
            /*mousewheel: {invert: true,},*/
            // Optional parameters
            direction: 'horizontal',
            slidesPerView: 3.5,
            loop: false,
            spaceBetween: 24,
            grabCursor: true,
            navigation: {
              nextEl: '.swiper-nav.next',
              prevEl: '.swiper-nav.prev',
            },
            breakpoints: {
              1: {
                slidesPerView: 1.1,
                spaceBetween: 16,
              },
              650: {
                slidesPerView: 2.1,
                spaceBetween: 16,
              },
              991: {
                slidesPerView: 3.5,
                spaceBetween: 24,
              },
            },
          });
        },
      ]);
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 11, 2023, 7:15pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/12 "2023-09-11T19:15:21Z")

</div>

Thanks @Support-Luis, unfortunately still no luck 😔  
A weird thing I’m noticing is that when you click the button the lightbox is actually showing in the DOM (I can select the paragraph) but for some reason it is invisible. Also, I’ve set one of the filters to be pre-checked, but it’s like it’s just hiding the cards creating a blank space at the end of the slider.

 ![Screenshot 2023-09-11 at 20.15.46](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/6/652caabd3d2d6d65414d7d94d4478ded114ee38f.jpeg)

---

<div class="post-metadata">

**Author:** ![marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/marco/32/494_2.png) [@marco](https://forum.finsweet.com/u/marco)\
**Post date:** [September 11, 2023, 7:24pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/13 "2023-09-11T19:24:13Z")

</div>

@Support-Luis I have to correct myself, your last code is working! I modified the animation in Webflow and it’s working great!  
At this point, the only issue I have is the one with the blank space at the end of the slider.

---

<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:** [September 12, 2023, 8:38am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/14 "2023-09-12T08:38:19Z")

</div>

Great to hear that you got the code working! 💪

The blank space at the end of the list could be a slider setting, I see this also has a horizontal scrolling so you might want to look into it.

---

<div class="post-metadata">

**Author:** ![carlos1pereira7](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/carlos1pereira7/32/2364_2.png) [@carlos1pereira7](https://forum.finsweet.com/u/carlos1pereira7)\
**Post date:** [May 18, 2024, 9:45am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/15 "2024-05-18T09:45:53Z")

</div>

Hello @Support-Luis

I hope you are doing fine.

I am having the same error as @marco I hope you can help me out on this matter.

Here is the read only link:

[https://preview.webflow.com/preview/cdei-es?utm\_medium=preview\_link&utm\_source=designer&utm\_content=cdei-es&preview=a55523ff47c431865ea29a0055c84e36&pageId=64c229679390fd8ed0131c53&itemId=64c229679390fd8ed0131f92&workflow=preview](https://preview.webflow.com/preview/cdei-es?utm_medium=preview_link&utm_source=designer&utm_content=cdei-es&preview=a55523ff47c431865ea29a0055c84e36&pageId=64c229679390fd8ed0131c53&itemId=64c229679390fd8ed0131f92&workflow=preview)

I am using a slider to show the speakers with a cms collection. The slider works fine.

The problem I currently have is that the Smart Lightbox is not working properly.

- I have applied the “trigger-open” to the button that says “Ver detalles”.
- I have applied the “lightbox” to the div that has the class “teachers\_modal\_out”.
- I have applied the “trigger-close” to the image that has the class “modal\_\_close-button”.

Also, I put the code that you shared before:

```auto

<!-- [Attributes by Finsweet] Smart Lightbox -->
    <script
      defer
      fs-attributes-preventload="true"
      src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"
    ></script>

```

And the other one:

```auto
<script>
  window.fsAttributes = window.fsAttributes || [];

  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      window.fsAttributes.smartlightbox.init();

      const [filterInstance] = filterInstances;

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        window.fsAttributes.smartlightbox.init();
      });

      window.fsAttributes.push([
        'smartlightbox',
        (lightboxInstances) => {
          console.log('ligthbox initiated');
          const swiper = new Swiper('.swiper', {
            /*mousewheel: {invert: true,},*/
            // Optional parameters
            direction: 'horizontal',
            slidesPerView: 3.5,
            loop: false,
            spaceBetween: 24,
            grabCursor: true,
            navigation: {
              nextEl: '.swiper-nav.next',
              prevEl: '.swiper-nav.prev',
            },
            breakpoints: {
              1: {
                slidesPerView: 1.1,
                spaceBetween: 16,
              },
              650: {
                slidesPerView: 2.1,
                spaceBetween: 16,
              },
              991: {
                slidesPerView: 3.5,
                spaceBetween: 24,
              },
            },
          });
        },
      ]);
    },
  ]);
</script>

```

after all, I have not been able to get the modal to override all the elements. The modal should show above all elements and not inside the tab of the speaker.

 ![problema fs](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/f/f8146574db6c6f9b2278c59d4a68aad2ec34e539.jpeg)

I hope you can help me find a solution for this.

Thank you so much for your time.

Kind regards,

---

<div class="post-metadata">

**Author:** ![carlos1pereira7](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/carlos1pereira7/32/2364_2.png) [@carlos1pereira7](https://forum.finsweet.com/u/carlos1pereira7)\
**Post date:** [May 18, 2024, 10:36am UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/16 "2024-05-18T10:36:54Z")

</div>

@Support-Luis

Here is the read only link:

[https://preview.webflow.com/preview/cdei-es?utm\_medium=preview\_link&utm\_source=designer&utm\_content=cdei-es&preview=9e34de851303cb633022f1aac2b56627&pageId=64c229679390fd8ed0131c33&itemId=64c229679390fd8ed0131fbe&workflow=preview](https://preview.webflow.com/preview/cdei-es?utm_medium=preview_link&utm_source=designer&utm_content=cdei-es&preview=9e34de851303cb633022f1aac2b56627&pageId=64c229679390fd8ed0131c33&itemId=64c229679390fd8ed0131fbe&workflow=preview)

Kind regads,

---

<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:** [May 20, 2024, 4:43pm UTC](https://forum.finsweet.com/t/smart-lightbox-inside-slider/1890/17 "2024-05-20T16:43:44Z")

</div>

hey @carlos1pereira7! Can you please share a published link? I’ll take a look