Customization | PixieSlider

Customizing PixieSlider

PixieSlider is designed for maximum flexibility. You can style and extend it using Tailwind CSS, custom class names, configuration options, and your own CSS.

1. Tailwind CSS Customization

All slider elements use utility classes, so you can easily style them with Tailwind. With Tailwind 4, you can use arbitrary values, new color utilities, and more.

<div data-slide data-media="image.jpg" data-captions='[
  { "text": "Custom Caption!", "className": "bg-[hsl(340,80%,60%)] text-white px-8 py-4 text-2xl rounded-xl shadow-lg" }
]'></div>

Use any Tailwind class in className for captions, navigation, etc.
Leverage Tailwind 4 features: arbitrary colors, spacing, font sizes, etc.
Combine with responsive classes (e.g., md:text-lg).

2. Custom Class Names

You can add your own classes to captions and other elements for advanced styling or to hook into your global CSS.

<div data-slide data-media="image.jpg" data-captions='[
  { "text": "Brand Caption", "className": "my-brand-caption" }
]'></div>

/* In your CSS */
.my-brand-caption {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  color: white;
  font-family: "Fira Sans", sans-serif;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

Use className for per-caption or per-element custom styles.
Combine with Tailwind classes for hybrid styling.

3. Overriding & Extending Global Styles

For global changes, add your own CSS targeting slider classes or use Tailwind's @apply directive.

/* Example: Make all captions semi-transparent and larger by default */
.caption-anim {
  @apply bg-black/70 text-xl md:text-2xl;
  border-radius: 0.75rem;
}

Override default styles by targeting slider utility classes or module classes (e.g., .caption-anim).
Use @apply for DRY, maintainable Tailwind-based CSS.

4. Customizing Navigation, Pagination, Progress, Thumbnails

All UI modules (navigation arrows, pagination dots, progress bar, thumbnails) use utility classes and can be styled globally or with custom classes or templates.

// Custom navigation arrow templates and classes
new PixieSlider('slider', {
  navigation: true,
  navPrevTemplate: '<span class="material-icons">arrow_back</span>',
  navNextTemplate: '<span class="material-icons">arrow_forward</span>',
  navPrevClass: 'my-nav-arrow left-2',
  navNextClass: 'my-nav-arrow right-2',
  // Pagination customization
  paginationDots: true,
  paginationDotClass: 'w-4 h-4 rounded-full bg-gray-300 border-2 border-blue-500',
  paginationActiveDotClass: 'bg-blue-600 scale-125',
  paginationWrapperClass: 'flex gap-4 justify-center',
  // Progress bar
  progressBar: true,
  progressBarColor: '#e52e71',
  // Thumbnails
  thumbnails: true,
  thumbnailSize: 80,
  thumbnailVertical: true
})

/* In your CSS */
.my-nav-arrow {
  @apply bg-brand-500 text-white rounded-full shadow-lg hover:bg-brand-600 transition;
  width: 2.5rem;
  height: 2.5rem;
}

Customize navigation and pagination with templates and classes via config.
Style progress bar and thumbnails with config and CSS.

5. Theming: Colors, Spacing, Transitions

You can theme PixieSlider using config options for colors, spacing, and transitions.

new PixieSlider('slider', {
  spacing: 16, // px between slides
  transition: 'fade',
  transitionDuration: 1200,
  easing: 'cubic-bezier(0.4,0,0.2,1)',
  progressBarColor: '#ff8a00',
  navPrevClass: 'bg-orange-500',
  navNextClass: 'bg-orange-500',
})

Set spacing for slide gaps.
Use transition, transitionDuration, and easing for animation style.
Theme navigation, progress, and other modules with color options and classes.

6. Responsive Layout & Sizing

PixieSlider is responsive by default. You can control aspect ratio, width, and height with utility classes or CSS.

<div id="slider" class="aspect-[16/9] w-full max-w-3xl mx-auto rounded-2xl shadow-lg"></div>

[data-slide] {
  @apply aspect-[16/9];
}

Use aspect-[16/9], w-full, max-w-3xl, etc. for layout.
Combine with responsive classes for mobile/desktop layouts.

7. Customizing Captions: Animations, Position, Responsive

Captions support custom animations, positions, and responsive text. Use the data-captions attribute and config options.

<div data-slide data-media="image.jpg" data-captions='[
  { "text": "Hello!", "position": "top-center", "animation": "slide-bottom", "delay": 500, "duration": 1000, "className": "text-2xl md:text-4xl" }
]'></div>

new PixieSlider('slider', {
  captions: true,
  captionAnimations: 'zoom',
  captionPosition: 'bottom-center',
})

Set animation, delay, duration, position per caption.
Use captionAnimations and captionPosition for defaults.
Combine with responsive and utility classes for advanced effects.

8. Advanced: Tailwind Plugins & Custom CSS

You can use Tailwind plugins (e.g., typography, aspect-ratio) or add your own CSS for even more control.

/* Example: Add aspect ratio to all slides */
[data-slide] {
  @apply aspect-[16/9];
}

Use plugins for advanced layouts, typography, or effects.
Combine with arbitrary values for pixel-perfect design.

For more examples and live demos, see the Examples page.