Bloom.Components.Marquee (bloom v0.0.8)

Marquee component

Sliding carousel of images that can go backwards and forwards.

Requires the following Tailwind CSS config extension:

extend: {

animation: {
  marquee: "marquee 20s linear infinite",
  "marquee-vertical": "marquee-vertical 20s linear infinite",
},
keyframes: {
  tilt: {
    "0%, 50%, 100%": { transform: "rotate(0deg)" },
    "25%": { transform: "rotate(6deg)" },
    "75%": { transform: "rotate(-6deg)" },
  },
  marquee: {
    from: { transform: "translateX(0)" },
    to: { transform: "translateX(calc(-100% - var(--gap)))" },
  },
  "marquee-vertical": {
    from: { transform: "translateY(0)" },
    to: { transform: "translateY(calc(-100% - var(--gap)))" },
  },
},

}

Summary

Functions

marquee(assigns)

Attributes

  • pause_on_hover (:boolean) - Pause on hover. Defaults to false.
  • repeat (:integer) - Number of repeats. Defaults to 4.
  • vertical (:boolean) - Vertical. Defaults to false.
  • reverse (:boolean) - Reverse. Defaults to false.
  • class (:string) - CSS class for parent div. Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block (required)

Functions

Link to this function

marquee(assigns)

Attributes

  • pause_on_hover (:boolean) - Pause on hover. Defaults to false.
  • repeat (:integer) - Number of repeats. Defaults to 4.
  • vertical (:boolean) - Vertical. Defaults to false.
  • reverse (:boolean) - Reverse. Defaults to false.
  • class (:string) - CSS class for parent div. Defaults to "".
  • Global attributes are accepted.

Slots

  • inner_block (required)