flowbite
flowbite copied to clipboard
themesberg
Carousel buggy/not working containing less than 3 Items
Describe the bug
- If you create a carousel containing only 2 Items (Images), the Animation when sliding, does not looks right (It's a little bit difficult do describe but the images are not fluently connected like when using 3 or more pics).
- When the carousel only contains one image, the carousel is not beeing displayed at all.
To Reproduce I created a simple page containing a carousel like shown in the docs and only put 1 (or 2) Items in the carousel:
<body class="p-4 bg-gray-800">
<div id="default-carousel" class="relative" data-carousel="static">
<!-- Carousel wrapper -->
<div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
<!-- Item 2 -->
<!--<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>-->
</div>
<!-- Slider indicators -->
<div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<!--<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>-->
</div>
<!-- Slider controls -->
<button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="hidden">Previous</span>
</span>
</button>
<button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="hidden">Next</span>
</span>
</button>
</div>
</body>
Expected behavior Even if there is only one Item in the Carousel I expect it to be displayed as normal. The same goes for the Animation when only using 2 Items.
Desktop (please complete the following information):
- OS: Windows
- Browser: Microsoft Edge
- Version: 102.0.1245.44
Hey @EweLoHD,
This actually makes sense and will fix it for the next version.
I have also some issues with v1.6.5. Default carousel works fine with 5 items , but if items' number change :
- only 2 items are shown
- or item is displayed 2 times !!!
I have the same problem. I have dynamic carousel items, when I have only 1 item, it doesn't show anything.
Hey everyone,
Will take a look at this issue when I can - contributions are welcome too.
@abunai10 the project is far from being abandoned, I'm doing my best to keep improving the library and fixing the issues:
https://github.com/themesberg/flowbite/releases/tag/v2.0.0 https://github.com/themesberg/flowbite/pull/678
Thanks, Zoltan
Will take a look at this issue when I can - contributions are welcome too.
That would be great! @zoltanszogyenyi
To add to this discussion, when there are 3 or fewer sliders, the "last" slider in the list slides right over top of the first slider when the first slider is sliding left out of frame. This only affects the last slider in the list. Once there are 4 or more sliders, it works just fine.
As per the last comment ... I just spent two days trying to get the slider to work properly with only three slides, and now I discover that it never was my fault :p
@zoltanszogyenyi maybe you could just update the paragraph on the Flowbite site that says "You can add as many carousel items as you want, but make sure that you add the data-carousel-item data attribute to each of them and set a single item to active by applying the active value to the data attribute." to include "Also be aware that you need a minimum of four (4) items for it to work as expected."
I know that's not ideal from a marketing perspective, but it would save a lot of pain and hassle for those of us who are trying to get onboard the Flowbite train :)
Hey @hitchless ,
Thanks for the input and for using Flowbite.
I'll try to have a look at this for the next release, as it is an open-source project contributions are more than welcome to fix such issues.
We are also actively looking to hire a FE engineer to help us with the issues and bugs that have been piling up as I personally have limited time to fix them all -- latest big update being the instance manager which in itself solved a lot of issues.
Sorry it took a long time to figure the bug out, I'll try to push a fix for this one as soon as I can.
Cheers!
Fixed via https://github.com/themesberg/flowbite/pull/550. Will be released on v2.3. Thanks!