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
Thanks!
Hey @marco! Can you try initializing Swipr like this?
<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>
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?
@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.
@Support-Luis yeah that’s what I thought. Do you think using the CMS filters solution instead of a tab component
would help?
Yes! We can have more options to reinitiate the scripts
@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?
@marco try using this script for the Lightbox in your <head>
<!-- [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>
<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>
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.
@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.
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.
