Splide — Lightweight Accessible Slider and Carousel

Introduction

Splide is a lightweight slider and carousel library that achieves zero Lighthouse errors out of the box. Written in TypeScript with no dependencies, it weighs under 30KB minified and provides touch/swipe support, autoplay, lazy loading, responsive breakpoints, and full keyboard/screen reader accessibility. Official integrations exist for React, Vue, and Svelte.

What Splide Does

• Renders responsive sliders and carousels from a simple HTML structure
• Supports horizontal, vertical, fade, and loop (infinite) slide transitions
• Handles touch, swipe, mouse drag, and keyboard navigation natively
• Provides autoplay with pause-on-hover and progress bar support
• Offers lazy loading for images to improve page load performance

Architecture Overview

Splide is built around a component-based architecture internally, with each feature (Arrows, Pagination, Autoplay, LazyLoad, Keyboard) implemented as a mountable component. The core manages a state machine tracking the active slide index, transition state, and drag coordinates. It uses CSS transforms for smooth hardware-accelerated transitions and IntersectionObserver for lazy loading. The library emits events at every lifecycle point, allowing extension via custom components or the event API.

Self-Hosting & Configuration

• Install via npm or include the CSS and JS from a CDN
• Add the required HTML structure with splide, splide__track, splide__list, and splide__slide classes
• Instantiate with new Splide('.splide', options).mount()
• Configure via the options object: type, perPage, gap, autoplay, breakpoints
• For React, use @splidejs/react-splide; for Vue, use @splidejs/vue-splide

Key Features

• Fully accessible with ARIA attributes, keyboard navigation, and live region announcements
• Multiple slide types: loop, fade, and slide with configurable per-page counts
• Responsive breakpoints for adapting layout to different screen sizes
• Extension system for adding features like video support, grid layouts, and URL hash navigation
• Thumbnail slider synchronization via the sync API

Comparison with Similar Tools

• Swiper — more feature-rich with 3D effects and virtual slides; Splide is smaller and simpler
• Flickity — polished touch carousel with physics-based dragging; Splide has better accessibility defaults
• Embla Carousel — headless, extensible carousel engine; Splide ships with styling and UI out of the box
• Glide.js — lightweight ES6 slider; Splide offers richer TypeScript types and framework integrations

FAQ

Q: Does Splide affect Lighthouse scores? A: No. Splide is designed to achieve zero Lighthouse errors in performance, accessibility, best practices, and SEO categories.

Q: Can I create an infinite loop slider? A: Yes. Set type: 'loop' in the options to enable infinite looping where the last slide transitions seamlessly back to the first.

Q: How do I sync a thumbnail slider with a main slider? A: Create two Splide instances and call mainSlider.sync(thumbnailSlider).mount() before mounting the thumbnail slider.

Q: Does it support video slides? A: Yes, via the official @splidejs/splide-extension-video extension, which supports YouTube, Vimeo, and HTML5 video.

Sources

• https://github.com/Splidejs/splide
• https://splidejs.com