# Splide — Lightweight Accessible Slider and Carousel

> A lightweight, flexible, and accessible slider/carousel library written in TypeScript with no dependencies, zero Lighthouse errors, and support for React, Vue, and Svelte.

## Install

Save in your project root:

# Splide — Lightweight Accessible Slider and Carousel

## Quick Use
```bash
npm install @splidejs/splide
```
```html
<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 1</li>
      <li class="splide__slide">Slide 2</li>
      <li class="splide__slide">Slide 3</li>
    </ul>
  </div>
</div>
<script>
  new Splide('.splide').mount();
</script>
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-4d9eea27
Author: AI Open Source