flowbite: 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 17 (4 by maintainers)
Commits related to this issue
- Merge pull request #550 from Kaz-/bugfix-carousel-with-single-item Fixed carousel not working when only one item, mentionned in #175 — committed to themesberg/flowbite by zoltanszogyenyi 6 months ago
any fixes for this Bug, i face it for 1 Slide?
I have the same problem. I have dynamic carousel items, when I have only 1 item, it doesn’t show anything.
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.
any update on this it’s still not working with 1 item.
Hey @EweLoHD,
This actually makes sense and will fix it for the next version.
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 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