Installation & Setup

Get PixieSlider up and running in your project in just a few steps. This guide covers installation, importing, and basic usage.

1. Install PixieSlider

Add the PixieSlider CSS and JS files to your project. You can use a CDN, local files, or your build system.

Include CSS

<head>
    <link rel="stylesheet" href="/path-to/pixie-slider.css" />
</head>

Import JS

<script type="module">
    import { PixieSlider } from '/path-to-your-files/pixie-slider.js';
</script>

2. Basic Usage (HTML)

Add a slider container and slides using data-media attributes. Then initialize PixieSlider with JavaScript.

<div id="slider-1" class="aspect-[16/9]">
    <div data-media="https://picsum.photos/id/1025/800/450"></div>
    <div data-media="https://picsum.photos/id/1015/800/450"></div>
    <div data-media="https://picsum.photos/id/1016/800/450"></div>
</div>
<script type="module">
    new PixieSlider('slider-1')
</script>

3. Advanced Usage (JavaScript & JSON)

You can also create slides in JavaScript using the Slide class and pass them to PixieSlider.

import { PixieSlider, Slide } from '/slider/dist/index.es.js';
const slides = [
    new Slide({ mediaType: 'image', media: 'https://picsum.photos/id/1025/800/450' }),
    new Slide({ mediaType: 'image', media: 'https://picsum.photos/id/1015/800/450' }),
    new Slide({ mediaType: 'image', media: 'https://picsum.photos/id/1016/800/450' }),
];
new PixieSlider('slider-1', { slides })

For more options, features, and advanced configuration, see the API Reference and Examples pages.