MarqueeKit

Configuration

Tailor MarqueeKit to your needs. Configure your instance with
precision and ease, unlocking a customized experience that's uniquely yours.

Quick Reference

new MarqueeKit("#my-marquee", {
  // Required options
  images: ["/image1.jpg", "/image2.jpg"],  // Array of image paths
  height: 300,                             // Container height in pixels
  imageWidth: 250,                         // Width of each image
  
  // Optional settings with defaults
  speed: 50,                               // Scroll speed (pixels/second)
  gap: 20,                                 // Space between images
  pauseOnHover: false,                     // Pause on mouse hover
  reverse: false,                          // Reverse scroll direction
  imageScale: 1,                           // Hover zoom factor
  borderRadius: 8                          // Image corner radius
});

Basic Options

images: string[]

Array of image paths to display in the marquee.

  • • Required option
  • • Supports .jpg, .png, .webp formats
  • • Images are lazy loaded for performance
  • • Loading state is handled automatically
new MarqueeKit("#my-marquee", {
  images: [
    "/path/to/image1.jpg",
    "/path/to/image2.webp",  // WebP recommended for better performance
    "/path/to/image3.jpg"
  ]
});
height: number

Height of the marquee container in pixels.

  • • Required option
  • • Images scale proportionally to fit
  • • Affects memory usage
imageWidth: number

Width of each image in pixels.

  • • Required option
  • • Images maintain aspect ratio
  • • Affects performance and memory usage
new MarqueeKit("#my-marquee", {
  height: 300,      // Container height
  imageWidth: 250,  // Image width
  // Other options...
});
gap: number

Space between images in pixels.

  • • Optional (defaults to 20)
  • • Affects overall scroll timing
new MarqueeKit("#my-marquee", {
  gap: 20,  // 20px space between images
  // Other options...
});

Animation Options

speed: number

Scroll speed in pixels per second.

  • • Optional (defaults to 50)
  • • Hardware accelerated for smooth animation
  • • Automatically pauses when not in viewport
  • • Can be changed dynamically with setSpeed()
new MarqueeKit("#my-marquee", {
  speed: 50,  // Balanced speed for smooth scrolling
  // Other options...
});
reverse: boolean

Reverse the scroll direction.

  • • Optional (defaults to false)
  • • false = left to right
  • • true = right to left
new MarqueeKit("#my-marquee", {
  reverse: true,  // Scroll right to left
  // Other options...
});
pauseOnHover: boolean

Pause animation when mouse hovers over the marquee.

  • • Optional (defaults to false)
  • • Smooth deceleration effect
  • • Works with imageScale option
new MarqueeKit("#my-marquee", {
  pauseOnHover: true,  // Enable pause on hover
  // Other options...
});

Visual Options

imageScale: number

Scale factor for image hover effect.

  • • Optional (defaults to 1)
  • • 1 = no scaling
  • • Hardware accelerated transform
  • • Smooth transition effect
new MarqueeKit("#my-marquee", {
  imageScale: 1.1,  // Grow images 10% on hover
  // Other options...
});
borderRadius: number

Border radius of images in pixels.

  • • Optional (defaults to 8)
  • • Can be updated with setBorderRadius()
  • • Set to 9999 for circular images
new MarqueeKit("#my-marquee", {
  borderRadius: 16,  // More rounded corners
  // Other options...
});

Common Configurations

Logo Wall

new MarqueeKit("#logo-wall", {
  images: logos,
  height: 100,       // Short height for logos
  imageWidth: 150,   // Compact logo size
  speed: 40,        // Moderate speed
  gap: 40,          // More space between logos
  pauseOnHover: false,
  imageScale: 1     // No hover effect
});

Product Gallery

new MarqueeKit("#product-gallery", {
  images: products,
  height: 400,       // Taller for product images
  imageWidth: 300,   // Larger product images
  speed: 30,        // Slower for better viewing
  gap: 30,          // Moderate spacing
  pauseOnHover: true,
  imageScale: 1.1,  // Subtle hover effect
  borderRadius: 12  // Rounded corners
});

Photo Stream

new MarqueeKit("#photo-stream", {
  images: photos,
  height: 250,      // Moderate height
  imageWidth: 250,  // Square images
  speed: 60,       // Faster scroll
  gap: 20,         // Tight spacing
  pauseOnHover: true,
  imageScale: 1.2, // Pronounced hover effect
  borderRadius: 8  // Slight rounding
});