carousel-fade option

[rallets]

Hi, first of all thanks for the lightbox, it works great! I'm wondering if it is possible to configure the main carousel using a carousel-fade option, as it's possible in bootstrap 5.2.

So, for example, the generated html should be:

div id="lightboxCarousel-xxx" class="lightbox-carousel carousel carousel-fade slide pointer-event" data-bs-ride="carousel" data-bs-interval="false">

I'm using the lightbox directly via the minified js (no custom options in js). Thank you

[trvswgnr]

It doesn't currently allow for adding custom classes, sorry. I don't think this would be difficult to implement; I'll add it in the next release.

As a workaround in the meantime, you could simply apply the styles that Bootstrap uses for .carousel-fade to .lightbox-carousel, like this:

.lightbox-carousel .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}

.lightbox-carousel .carousel-item-next.carousel-item-start,
.lightbox-carousel .carousel-item-prev.carousel-item-end,
.lightbox-carousel .carousel-item.active {
    z-index: 1;
    opacity: 1;
}

.lightbox-carousel .active.carousel-item-end,
.lightbox-carousel .active.carousel-item-start {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-carousel .active.carousel-item-end,
    .lightbox-carousel .active.carousel-item-start {
        transition: none;
    }
}

[rallets]

Hi, thanks for the feedback and support. It looks like my UI/UX team doesn't mind too much we have two different carousel setup in the project, so I will close this for now. But I think I will still apply the css to the base class as you suggested.

PS. I think in general would be ideal to be able to plugin some kind of settings, just to get the same bootstrap look & feeling, to avoid custom css that is a pain to maintain if we think in the long term.