MotionRail

Appearance

Quick Start ​

Basic Setup ​

1. HTML Structure ​

Create the carousel HTML structure with the required data attributes:

html
<div data-motionrail id="carousel">
  <div data-motionrail-scrollable>
    <div data-motionrail-grid>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
    </div>
  </div>
</div>

<style>
  #carousel [data-motionrail-grid] > div {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    height: 200px; /* YOU set the height, however you want */
  }
</style>

ABOUT HEIGHT

The carousel height is not set by default, giving you full control over your layout. You can set the height on the carousel container itself, on individual items, or use any CSS approach that fits your design.

Structure layers:

  • [data-motionrail] - Wrapper element (receives the ID)
  • [data-motionrail-scrollable] - Scrollable container with overflow and snap behavior
  • [data-motionrail-grid] - Grid layout container
  • Direct children - Carousel items (no specific class or attribute required)

2. Import Styles & Initialize the Carousel ​

js
import { MotionRail } from 'motionrail';
import 'motionrail/style.css';

const carousel = new MotionRail(document.getElementById('carousel'), {

  // set autoplay true for this example
  autoplay: true,

  // set the breakpoints
  breakpoints: [
    { columns: 1, gap: '16px' },
    { width: 400, columns: 2, gap: '16px' },
    { width: 550, columns: 3, gap: '20px' }
  ]
});

Result ​

Try it yourself: Drag the left or right edge to resize the container and see how the carousel responds to different breakpoints.

Width: 0

Using UMD (CDN) ​

If you prefer not to use a build tool, you can use the UMD version via CDN:

html
<link 
  rel="stylesheet" 
  href="https://unpkg.com/motionrail@latest/dist/style.css">

<div data-motionrail id="carousel">
  <div data-motionrail-scrollable>
    <div data-motionrail-grid>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/motionrail@latest/dist/motionrail.umd.cjs"></script>
<script>
  const carousel = new MotionRail(
    document.getElementById('carousel'), 
    {
      autoplay: true,
      breakpoints: [
        { columns: 1, gap: '16px' },
        { width: 400, columns: 2, gap: '16px' },
        { width: 550, columns: 3, gap: '20px' }
      ]
    }
  );
</script>

Next Steps ​