Skip to Content

Components

Marquee

Dependencies:

  • MarqueeItem

1.1.0

Requires Celeste 1.1.0

Install or Update

wp celeste pull component Marquee

Dependencies will automatically be installed.

Properties

Prop Description
gap Valid CSS unit for the gap between items, e.g. 12px or var(--space-xs). Defaults to var(--space-sm)
speed Valid CSS unit for the speed, in time. e.g. 20ms, 10s. Defaults to 40s
pauseOnHover Whether the Marquee should pause when hovered, true or false

How to use it

<Marquee pauseOnHover>
    <MarqueeItem class="bg-red-500">
        <img src="https://unsplash.it/300?random=1" width="200" height="200" alt="">
    </MarqueeItem>
    <MarqueeItem>
        <img src="https://unsplash.it/300?random=2" width="200" height="200" alt="">
    </MarqueeItem>
    <MarqueeItem>
        <img src="https://unsplash.it/300?random=3" width="200" height="200" alt="">
    </MarqueeItem>
    <MarqueeItem>
        <img src="https://unsplash.it/300?random=4" width="200" height="200" alt="">
    </MarqueeItem>
    <MarqueeItem>
        <img src="https://unsplash.it/300?random=5" width="200" height="200" alt="">
    </MarqueeItem>
    <MarqueeItem>
        <img src="https://unsplash.it/300?random=6" width="200" height="200" alt="">
    </MarqueeItem>
</Marquee>