Svelte Marquee Banner - Flowbite

Use Marquee Banner to display a series of items

Setup #

  • Svelte
<script>
  import { Marquee } from 'flowbite-svelte'
</script>

Simple Maquee #

  • Svelte
<Marquee speed={1} class="py-16">
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>

Hover speed #

  • Svelte
<Marquee speed={1} hoverSpeed={0.5} class="py-16">
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>

Shadow #

  • Svelte
<Marquee shadow class="py-16">
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://www.flowbite-react.com/favicon.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite-vue.com/assets/logo.svg" />
    <img class="w-16 h-16" alt="flowbite-svelte icon logo" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>

Component data #

References #