Swiffy Slider

Super fast and lightweight slider and carousel

A whole new approach to sliders and carousels utilizing 2021 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.0.1·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

    No need to remember all the settings

    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.0.1/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/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.