Skip to content

Carousel broken since 0.48 #1548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
superstes opened this issue Feb 26, 2025 · 2 comments
Closed

Carousel broken since 0.48 #1548

superstes opened this issue Feb 26, 2025 · 2 comments

Comments

@superstes
Copy link
Contributor

Describe the bug

The carousel component seems to be broken on v0.48.x
The exact same code (as per docs) works fine on 0.47.x

Image

Reproduction

I was able to reproduce it on stackblitz.

+page.svelte

<script lang="ts">
    import { Carousel } from 'flowbite-svelte';

    export const images = [
        {
            alt: 'Cosmic timetraveler',
            src: 'https://flowbite-svelte.com//images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp',
            title: 'cosmic-timetraveler-pYyOZ8q7AII-unsplash.com'
        },
        {
            alt: 'Cristina Gottardi',
            src: 'https://flowbite-svelte.com//images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp',
            title: 'cristina-gottardi-CSpjU6hYo_0-unsplash.com'
        },
        {
            alt: 'Johannes Plenio',
            src: 'https://flowbite-svelte.com//images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp',
            title: 'johannes-plenio-RwHv7LgeC7s-unsplash.com'
        },
        {
            alt: 'Jonatan Pie',
            src: 'https://flowbite-svelte.com//images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp',
            title: 'jonatan-pie-3l3RwQdHRHg-unsplash.com'
        },
    ]
</script>
<div class="max-w-4xl space-y-6">
    <Carousel {images} let:Indicators let:Controls duration="6000">
        <Controls />
        <Indicators />
    </Carousel>
</div>

Note: Seems the gradient-span has also an issue.

<script lang="ts">
    import { Carousel, Heading, Span } from 'flowbite-svelte';
</script>

<div>
    <Heading tag="h1" class="mb-4" customSize="text-3xl font-extrabold  md:text-5xl lg:text-6xl">
        <Span gradient>Better Data</Span> Scalable AI.
    </Heading>
</div>

Flowbite version and System Info

Flowbite Svelte: v0.48.4
Svelte: v5.1.9
SvelteKit: v2.7.3
Vite: v5.4.10
@jjagielka
Copy link
Contributor

I'm sorry, I can't reproduce. Just made a fresh project - following the guide from Quickstart page - copied your examples and they work perfectly good.

@superstes
Copy link
Contributor Author

I guess it is/was tailwind v3.
Thus it might be related to: #1516

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants