Qwik carousel - Flowbite

Get started with the carousel component to showcase images and content and slide through them using custom controls, intervals, and indicators with Qwik and Tailwind CSS

Use the responsive carousel component to allow users to slide through multiple items and navigate between them using the control buttons and indicators.

Choose from multiple examples and options to update the intervals, make the carousel static and set custom control button and indicator by configuring Qwik and the utility classes from Tailwind CSS.

To start using the carousel component you first need to import it from flowbite-qwik :

import { Carousel } from "flowbite-qwik"

Default carousel#

Use this example by adding a series of images inside the <Carousel> component.

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" width="790" height="790" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" width="790" height="790" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" width="790" height="790" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" width="790" height="790" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" width="790" height="790" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Slider content#

Instead of images you can also use any type of markup and content inside the carousel such as simple text.

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">Slide 1</div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">Slide 2</div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">Slide 3</div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">Slide 4</div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">Slide 5</div>
      </Carousel.Slide>
    </Carousel>
  )
})

Static carousel#

Pass the slideAuto prop to false to the carousel component to make it static and disable the automatic sliding functionality. This does not disable the control or indicator buttons.

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel slideAuto={false}>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Sliding interval#

Use the slideInterval prop to set the interval between slides in milliseconds. The default value is 3000.

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel slideInterval={5000}>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Carousel without controls#

Use the noControls prop to hide the controls of the carousel

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel noControls>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Carousel without indicators#

Use the noIndicators prop to hide the indicators of the carousel

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel noIndicators>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Slider complex content#

Instead of images or simple texte, we can use any component we need

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Card, Carousel, Heading } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel class="!h-96">
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
          <Card href="#" class="max-w-sm">
            <Heading tag="h4">Noteworthy technology acquisitions 2021</Heading>
            <p class="font-normal text-gray-700 dark:text-gray-400">
              Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
            </p>
          </Card>
        </div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-blue-400 dark:bg-blue-700 dark:text-white">
          <Card href="#" class="max-w-sm">
            <Heading tag="h4">Crystal Clear Oasis</Heading>
            <p class="font-normal text-gray-700 dark:text-gray-400">
              Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
            </p>
          </Card>
        </div>
      </Carousel.Slide>
      <Carousel.Slide>
        <div class="flex h-full items-center justify-center bg-rose-400 dark:bg-rose-700 dark:text-white">
          <Card href="#" class="max-w-sm">
            <Heading tag="h4">Lost in the Sands</Heading>
            <p class="font-normal text-gray-700 dark:text-gray-400">
              Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
            </p>
          </Card>
        </div>
      </Carousel.Slide>
    </Carousel>
  )
})

Scrollable carousel#

Use this example using the prop "scrollable" to scroll inside the carousel

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel
      scrollable
      slideAuto={false}
      onSlideChanged$={() => {
        console.log('changed !')
      }}
    >
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Pause On Hover#

To conditionally pause the carousel on mouse hover (desktop), or touch and hold (mobile), you can use the pauseOnHover property on the <Carousel> component. Default value is false.

Edit on GitHub

Toggle desktop view
Toggle tablet view
Toggle mobile view

Toggle RTL mode

tsx

import { component$ } from '@builder.io/qwik'
import { Carousel } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Carousel pauseOnHover>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
      </Carousel.Slide>
      <Carousel.Slide>
        <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
      </Carousel.Slide>
    </Carousel>
  )
})

Qwik carousel - Flowbite

Default carousel#

Slider content#

Static carousel#

Sliding interval#

Carousel without controls#

Carousel without indicators#

Slider complex content#

Scrollable carousel#

Pause On Hover#

On this page