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}>
<img class="w-32 h-32" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
<img class="w-32 h-32" src="https://www.flowbite-react.com/favicon.svg" />
<img class="w-32 h-32" src="https://flowbite-vue.com/assets/logo.svg" />
<img class="w-32 h-32" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>Hover speed #
- Svelte
<Marquee speed={1} hoverSpeed={0.5}>
<img class="w-32 h-32" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
<img class="w-32 h-32" src="https://www.flowbite-react.com/favicon.svg" />
<img class="w-32 h-32" src="https://flowbite-vue.com/assets/logo.svg" />
<img class="w-32 h-32" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>Shadow #
- Svelte
<Marquee shadow>
<img class="w-32 h-32" src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" />
<img class="w-32 h-32" src="https://www.flowbite-react.com/favicon.svg" />
<img class="w-32 h-32" src="https://flowbite-vue.com/assets/logo.svg" />
<img class="w-32 h-32" src="https://flowbite.com/docs/images/logo.svg" />
</Marquee>MarqueeItem #
| Name | Type | Default |
|---|---|---|
| speed | number | 1 |
| hoverSpeed | number | 1 |
| shadow | boolean | false |