Swiffy Slider

Super fast and lightweight slider and carousel

A whole new approach to sliders and carousels utilizing todays browser features.

Run a lighthouse test on this page and the examples page, just to see...

3 kb CSS. 1.2 KB JS.

Get started Configurator

Currently: v1.6.0·Docs·Examples

  • Feature rich

    Feature rich

    Supports all common use cases

    Super mobile friendly and awesome touch support

    Slide any content in any markup structure

  • Modern CSS

    Modern CSS

    Uses CSS grid to control slides and gaps

    Scroll-snap for handling sliding and aligning

    Overridable CSS variables to control layout

  • Setup using markup

    Setup using markup

    Very simple markup structure

    Use any html element - ul, div, button etc

    Apply own classes and attributes in the markup, no js

  • Lightweight and fast javascript

    Lightweight and fast Javascript

    Small footprint - < 1.5KB!

    Automatic or manual initialization

    Simple and easy to use API - ESM available

  • Lightweight and fast javascript

    Visual configurator

    Easy UI for configuring the slider

    See and try the changes right away

    Share configuration with a link

    Try the Configurator

CSS
html
javascript
Github
Bootstrap
Github
Node js
Webpack
Star Wars
Prettier
ES Lint

Quick start

CSS and Javascript

Copy-paste the stylesheet <link> and javascript <script> into your <head> section.

<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">

HTML

Copy-paste the HTML below into the <body> of your markup.

<div class="swiffy-slider">
    <ul class="slider-container">
        <li><img src="https://source.unsplash.com/49b9l_29ceA/1600x900" style="max-width: 100%;height: auto;"></li>
        <li><img src="https://source.unsplash.com/nKAglN6HBH8/1600x900" style="max-width: 100%;height: auto;"></li>
        <li><img src="https://source.unsplash.com/E9ZwWcMGzj8/1600x900" style="max-width: 100%;height: auto;"></li>
    </ul>

    <button type="button" class="slider-nav"></button>
    <button type="button" class="slider-nav slider-nav-next"></button>

    <div class="slider-indicators">
        <button class="active"></button>
        <button></button>
        <button></button>
    </div>
</div>

Result

That is all you need to get a slider up and running! See the examples section to get ideas on how to design sliders and carousels.

There are many configuration options - use the configurator to help get you started and see the docs for all the options.

  • Car
  • Woman
  • Car

About Swiffy Slider

There are many really good sliders and carousels around. Most of them was born many years ago. Because of what was possible back then, they utilize a lot of javascript, event listeners and a swarm of things to handle sliding behavior.

Swiffy Slider is a new beginning - using what browsers supports now. All the sliding, dragging, snapping etc. are now native browser behavior and not javascript. Swiffy Slider can even run in a simple mode with no JS!

This gives an unrivaled performance, user expericense, touch experience and simplicity.

At the same time, it has support for any input device in the world - touch, mouse, keyboards, touch pads, track pads, pencils, assitive devices, controllers etc.

W3 validation, 100% WCAG compatible, Super high Google Lighthouse scores, compatible with any frontend framework and development stack.