Getting Started

Start building beautiful image marquees with MarqueeKit

HTML/CSS/JS

Getting Started with MarqueeKit:

Follow these steps after downloading MarqueeKit:

Unzip the marqueeKit.zip
Open the folder in your preferred code editor.
Open START_HERE.md, and follow it's Quick Start instructions.

First, organize your project files as follows:

📂 your-project
 ┣ 📂 css
 ┃ ┗ 📜 marquee.css
 ┣ 📂 js
 ┃ ┗ 📜 marquee.js
 ┣ 📂 images
 ┃ ┣ 🖼️ image1.jpg
 ┃ ┣ 🖼️ image2.jpg
 ┃ ┗ 🖼️ image3.jpg
 ┗ 📜 index.html

2. HTML Setup

Add these lines to your HTML file:

<!-- In your <head> section -->
<link rel="stylesheet" href="/css/marquee.css">

<!-- In your <body> section -->
<div id="my-marquee"></div>

<!-- Before closing </body> -->
<script src="/js/marquee.js"></script>

3. Initialize MarqueeKit

Add this script to initialize your marquee:

<!-- After other scripts -->

<script>
  new MarqueeKit("#my-marquee", {
    images: [
      "/images/image1.jpg",
      "/images/image2.jpg",
      "/images/image3.jpg"
    ],
    height: 300,
    imageWidth: 250,
    speed: 50,
    gap: 20,
    reverse: false,
    pauseOnHover: true,
    imageScale: 1.05,
    borderRadius: 8
  });
</script>

💡 Pro Tip

Use a live server to preview your marquee in real-time. If you're using VS Code, install the "Live Server" extension for the best development experience.

4. Basic Configuration Options

Required Options

images: Array of image paths
height: Marquee height in pixels
imageWidth: Width of each image in pixels

Optional Settings

speed: Scroll speed (default: 50)
gap: Space between images (default: 20)
reverse: Scroll direction (default: false)
pauseOnHover: Pause on mouse hover (default: false)
imageScale: Hover zoom factor (default: 1)
borderRadius: Image corner radius (default: 8)

Advanced Configuration

Explore all available options and customization possibilities.

View Options

Examples

Browse through real-world examples and common use cases.

View Examples