@splidejs/splide

What is @splidejs/splide?

@splidejs/splide is a lightweight, flexible, and powerful JavaScript slider and carousel library. It provides a wide range of features to create responsive, touch-friendly, and customizable sliders and carousels for web applications.

What are @splidejs/splide's main functionalities?

Basic Slider

This code initializes a basic slider using the Splide library. The '.splide' selector targets the HTML element that will contain the slider, and the 'mount()' method sets up the slider.

const splide = new Splide('.splide');
splide.mount();

Autoplay

This code initializes a slider with autoplay functionality. The 'type' option is set to 'loop' to create an infinite loop of slides, and 'autoplay' is set to true to enable automatic sliding.

const splide = new Splide('.splide', {
  type   : 'loop',
  autoplay: true,
});
splide.mount();

Custom Pagination

This code demonstrates how to create a custom pagination for the slider. The 'pagination' option is set to false to disable the default pagination, and a custom pagination element is created and mounted using the 'pagination:mounted' event.

const splide = new Splide('.splide', {
  pagination: false,
});
splide.mount();

const pagination = document.createElement('ul');
pagination.className = 'splide__pagination';

splide.on('pagination:mounted', function (data) {
  data.list = pagination;
});

Responsive Breakpoints

This code configures the slider to be responsive to different screen sizes. The 'breakpoints' option allows you to specify different settings for different screen widths. In this example, the slider will show 1 slide per page on screens smaller than 640px and 2 slides per page on screens smaller than 1024px.

const splide = new Splide('.splide', {
  breakpoints: {
    640: {
      perPage: 1,
    },
    1024: {
      perPage: 2,
    },
  },
});
splide.mount();

Other packages similar to @splidejs/splide

swiper

Swiper is a modern touch slider that is highly customizable and supports a wide range of features including vertical sliders, nested sliders, and parallax effects. It is similar to @splidejs/splide in terms of flexibility and ease of use, but it offers more advanced features and a larger community.

slick-carousel

Slick Carousel is a popular and widely used carousel library that offers a variety of features such as lazy loading, autoplay, and responsive breakpoints. It is similar to @splidejs/splide in terms of functionality, but it has a larger user base and more extensive documentation.

owl.carousel

Owl Carousel is a touch-enabled jQuery plugin that allows you to create responsive and customizable carousels. It is similar to @splidejs/splide in terms of providing a wide range of customization options, but it requires jQuery as a dependency.

README

Splide

Splide is a lightweight, flexible and accessible slider and carousel.
No dependencies, no Lighthouse errors.

Download
Getting Started
Demo
Documents
Themes
About v4
Discussions/Q&A

Ready For

Extensions

Auto Scroll ・ Intersection ・ Grid ・ Video ・ URL Hash

Translation

日本語

Support Splide

Please support the project if you like it!

• GitHub Sponsors

Features

• Written in TypeScript
• No dependencies
• Lightweight, 29kB (12kB gzipped)
• Flexible and extensible
• Protected by 400+ test cases
• Multiple slides
• Slide or fade transition by CSS
• Supports breakpoints
• Accepts CSS relative units
• Autoplay with progress bar and a play-pause toggle button
• RTL and vertical direction
• Mouse drag and touch swipe
• Free drag mode
• Mouse wheel navigation
• Nested slider
• Lazy loading
• Thumbnail slider
• Auto width and height
• Accessibility friendly
• Live Region
• Internet Explorer 10

No Lighthouse Errors

Here is the mobile version result of the Splide front page:

The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉

License

Splide is released under MIT license. © 2022 Naotoshi Fujita