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.
Supports all common use cases
Super mobile friendly and awesome touch support
Slide any content in any markup structure
Uses CSS grid to control slides and gaps
Scroll-snap for handling sliding and aligning
Overridable CSS variables to control layout
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
Small footprint - < 1.5KB!
Automatic or manual initialization
Simple and easy to use API - ESM available
Easy UI for configuring the slider
See and try the changes right away
Share configuration with a link
Copy-paste the stylesheet
<script> into your
<script src="https://firstname.lastname@example.org/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script> <link href="https://email@example.com/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
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>
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.
About Swiffy Slider
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.