Ability to use custom buttons to scroll to specific carousel elements

[jacobseated]

Is your feature request related to a problem? Please describe. To my regret, I was forced into using flowbite for a project, and I consistently seem to run into limitations and erroneous or lacking documentation.

E.g. The documentation states that I can change animations, by adding tailwind classes to my Carusel items. But, when I try it out, the animation still appears when using custom triggers.

Describe the solution you'd like I'd very much like to have it documented how to tap into existing flowbite components. To an extent I have managed to "hack" it with come nasty custom JavaScript, but it is just not sustainable. I really hope this is not because it cannot be done, but rather a matter of missing documentation.

The JavaScript documentation that exist shows us an unnecessarily bulky way to init our own component, but this is not what we want. We need to tap into existing components that are automatically initialized via data attributes.

Describe alternatives you've considered The following hack will at least change the active image, although the animation then breaks if the user skips an image:

document.addEventListener("DOMContentLoaded", (event) => {
        const lightBoxContent = document.querySelector('.image-lightbox-content');
        if (!lightBoxContent) { return; }
        // Fetch all images from the gallery for the lightbox
        let imagesInGallery = document.querySelectorAll('.lightbox-item img');
        const imagesInLightBox = document.querySelectorAll('#light-box-slider .image-lightbox-content .slider-item');
        // Note. We need to add our own click event handler in order to know which element was used to open the modal
        document.body.addEventListener('click', (event) => {
            imagesInLightBox.forEach((sliderItem) => {
                // If the media ID matched the one that was clicked
                if (event?.target?.id && event.target.id == sliderItem.querySelector('img').id) {
                    sliderItem.setAttribute('data-carousel-item', 'active');
                    setTimeout(()=> {
                        initCarousels();
                    }, 100);
                } else {
                        sliderItem.setAttribute('data-carousel-item', false);
                }
        });
        });
});

[zoltanszogyenyi]

Hey @jacobseated,

Thanks for opening up the issue.

You can use custom buttons to slide through the carousel by adding the data-carousel-prev and data-carousel-next data attributes to the button elements. You can even see such an example in our blocks collection from here:

https://flowbite.com/blocks/marketing/testimonial/#carousel-slider

Cheers, Zoltan

[jacobseated]

Thanks @zoltanszogyenyi, but I already tried experimenting with data properties, as they are demonstrated in the free documentation. The page you linked also seem to be protected behind a paywall?

Based on my experimentation with things like data-carousel-slide-to, I deduced the location in the DOM to be specific. E.g. A custom button has to be a descendant of the flowbite component I am trying to control? When placed elsewhere in a document, flowbite seem to have no way to identify which component that is intended to be controlled by the custom button via data property alone, and indeed, it does not even seem to register the button is there.

Further more, you cannot simply set data-carousel-item="active" on a Carousel dynamically via JavaScript, and then have it "slide to an item" in the list? If you could, then i would have my solution though. It works only when the item set to "active" is a neighbor to the previously active item – if even a single item is jumped, then the animation is broken, and it will "flicker" instead of sliding.

Unless, I am missing something, there seem to be no way to specify an ID of a component.

Reading some of the testimonials, it seems like everyone is having a super easy time; I have spent probably a few days "hacking" at it, and still no proper solution. I am very determined to learn to do things the proper way, however, so maybe the issue is that I should simply initialize the components we need to customize manually, as I did with another component. It's just that it seems a bit excessive having to do that, and I was hoping for a simpler approach.