swiffy-slider

Swiffy Slider


Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers.


Explore Swiffy Slider docs »




See examples
·
Visual carousel and slider configuration

!version

Swiffy Slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.

Modern browser offers really good options these days to create much better user experience for sliders and carousels than existing libraries offer.

This project utilizes what is available in modern browsers resulting in a super lightweight and fast slider, greatly reducing the javascript footprint and increase performance to meet todays standards.

- Navigate with Touch, Keyboard, trackpad, pen and Mouse - because it is just browser scrolling
- Uses native browser scroll behavior, scroll-snap and CSS grid to provide the best mobile and touch experience
- Can run in CSS only mode - no js for even better performance
- SEO friendly - all content is in pure markup
- WCAG friendly - all content is in pure markup and can be annotated accordingly, supports tabbing, keyboard navigation, aria attributing and all what is needed.
- Setup is done in pure markup and css classes, no scripting required
- No js loading of slides, configuration or initialization
- Vanilla javascript, less than 1.3kb ~110 lines
- Very low overall footprint ~3.5kb in total (css+js gzip'ed)

Table of contents

- Quick start
- 1. Add CSS and JS to website head section
- 2. Add markup
- Additional installation options
- Features
- What's included
- Bugs and feature requests
- Documentation
- Introduction
- Markup structure
- Slider options (CSS Classes)
- Slider wrapper
- Slider sections
- Slider options
- Navigation options
- Indicator options
- Animation options
- Javascript
- Javascript loading and binding
- Optimized loading
- CSS variables
- Safari smooth scrolling polyfill
- Limitations
- Contributing
- Star gazers
- Examples of sites using Swiffy Slider
- Versioning
- Creators
- Copyright and license

Quick start

#### 1. Add CSS and JS to website head section
``html

`

Listening for sliding ends for a container and find visible slides
`html

`

$3

Load Swiffy slider using webpack, ESBuild and other build tools. In your index.js (or whatever you call it).
NOTE: Swiffy slider is an ES Module and you need a supported processing ECMAScript compiler - i.e. webpack 5+ etc.

`javascript
// import Swiffy Slider JS
import { swiffyslider } from 'swiffy-slider'
window.swiffyslider = swiffyslider;

window.addEventListener("load", () => {
window.swiffyslider.init();
});

// import Swiffy Slider CSS
import "swiffy-slider/css"

`
`css
// import Swiffy Slider src CSS unminified
import "swiffy-slider/src/swiffy-slider.css"
`

Avoid autobinding by adding data-noinit attribute on the script tag and then attach the slider manually
`html

...

`

`html

...

...

`

Load as module using ES version of the script
`html

`

Load as ES module on demand, here using load - could be when slider scrolls into view or navigation arrow is clicked the first time. Load module and initialize sliders.
`html

`

Load as ES module on demand. Load module and assign to window for later script manipulation of slides
`html

`

#### Optimized loading
When loading the script with defer attribute, the initialization will happen as soon as the script is downloaded.
Deferred scripts are requested and run as soon as the document is parsed by the browser. This is the recommended approach.

`

``

Limitations

These limitations are known and intentionally there to keep this library small, fast and smooth.
- Scroll speed comes in 2 flavors - instant or 'smooth'. This is because that is what browsers support out of the box using CSS scroll-behavior. See MDN
- Does not support slides of uneven widths. The width is controlled by the width of the wrapper and can have 1-6 slides per page depending on configuration.
- Smooth scrolling is not supported out of the box in Safari (Before v 15.4) (iOS + Mac) but can be fixed using a polyfill. See polyfill
- RTL is untested but as the entire slider is just markup, it should be supported very well
- Works in 'modern' browsers from the last ~3 years only. No IE support or anything funny.

Use other sliders and carousels if these limitations is important in your project.

Contributing

You are more than welcome to contribute by opening issues and create pull requests.
Keep in mind that this project is meant to be very simple in nature and support recent browsers only.

This project is not going into a race of adding as many features as possible - but quite the opposite.
Performance and filesize has high priority.

The general rule is, that Swiffy Slider is covering the most common usages, and that more exotic usages are made in examples.
If not at least 50% of all installations need a feature, the feature probably belong somewhere else.

Examples of more exotic use cases are more than welcome as part of the examples, so please create pulls for that.

Open tasks that you could help with:
- Svelte component
- Vue component
- React component

Thank you for your understanding.

Star gazers

Feel free to star this project and help spread the word.


Examples of sites using Swiffy Slider

Send an email to https://github.com/nicped if you would like your site on this list.

- Ärzte ohne Grenzen Österreich
- Swiffy slider documentation
- Dynamicweb Swift Ecommerce Starter

Versioning

See the Releases section of our GitHub project for changelogs for each release version of Swiffy Slider.

Creators

Nicolai Høeg Pedersen

-

Dynamicweb

-

Copyright and license

Code and documentation copyright 2022 the Swiffy Slider Authors and Dynamicweb A/S Code released under the MIT License. Docs released under Creative Commons.