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
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, ESM only
- Very low overall footprint ~3.5kb in total (css+js gzip'ed)
- Quick start
- Additional installation options
- Why Swiffy Slider
- Features
- Browser support
- What's included
- Bugs and feature requests
- Documentation
- Limitations
- Migrating from v1
- Development
- Contributing
- Star gazers
- Examples of sites using Swiffy Slider
- Versioning
- Creators
- Copyright and license
<script type="module">
import { swiffyslider } from 'https://cdn.jsdelivr.net/npm/swiffy-slider@2.1.0/dist/js/swiffy-slider.js';
window.addEventListener('load', () => swiffyslider.init());
</script>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@2.1.0/dist/css/swiffy-slider.css" rel="stylesheet"><div class="swiffy-slider slider-item-helper">
<ul class="slider-container">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</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>Call swiffyslider.init() after the DOM is ready to bind all .swiffy-slider instances.
- Download the latest release
- Clone the repo:
git clone https://github.com/dynamicweb/swiffy-slider.git - Install with npm:
npm install swiffy-slider - Install with yarn:
yarn add swiffy-slider
Loading via bundler (ESM)
import { swiffyslider } from 'swiffy-slider';
import 'swiffy-slider/css';
window.addEventListener('load', () => swiffyslider.init());Loading extensions (optional mouse drag support)
import { swiffysliderextensions } from 'swiffy-slider/extensions';
window.addEventListener('load', () => swiffysliderextensions.init());Read the Getting started page for examples, configuration options and a visual configurator.
Most slider libraries ship a large JavaScript runtime that reimplements scrolling, snapping, and touch handling from scratch. Modern browsers already do all of this natively. Swiffy Slider is a thin layer of CSS and a small amount of JavaScript that wires up what the browser already provides.
| Library | JS size (gzip) |
|---|---|
| Swiper | ~40KB |
| Splide | ~11KB |
| Glide.js | ~7KB |
| Swiffy Slider | ~1.3KB |
The result is better scroll performance (native momentum and snap), full accessibility via native focus/tab/keyboard, and no dependencies to maintain.
- Carousel - Slide any content. Images, cards, videos, text, banners, posters, anything markup
- Carousel - Slide using touch, keyboard, mouse or navigation buttons
- Carousel - 1, 2, 3, 4, 5 or 6 slides visible in the slider wrapper
- Carousel - snap to start or center slide items
- Carousel - Slide one item or entire page on navigate when showing more than one
- Carousel - Partially reveal next and previous (optional) slide to indicate touch scroll is available
- Carousel - Loop to start when slides end
- Navigation - 7 built in navigation styles for next and previous navigation in light or dark mode, 14 in total
- Navigation - Overlay or outside navigation options
- Navigation - Show navigation arrows on hover or always. Show on desktop, but not touch
- Indicators - 3 built in indicator styles; pin, dots or squares in light or dark mode
- Indicators - Overlay or outside location of indicators
- Indicators - Navigate to slide by clicking indicator
- Auto play - Automatically slide with specified interval
- Auto pause - Stop playing when mouse is hovering carousel or touch is used
- Animation - Add animations when slides slide into view
- Animation - Choose between 6 different animations
- Animation - Use normal, fast or slow animations
- Scripting - Automatic or manual initialization of slider instances using
swiffyslider.initorswiffyslider.initSlider - Scripting - Execute scripts when an item is done sliding using
swiffyslider.onSlideEnd - Scripting - Start and stop automatic sliding using script
Swiffy Slider requires CSS scroll-snap and CSS Grid, which are supported in all modern browsers. No IE support.
| Browser | Minimum version |
|---|---|
| Chrome | 69 |
| Firefox | 99 |
| Safari | 11 |
| Edge | 79 |
Within the download you'll find the following directories and files. You'll see something like this:
swiffy-slider/
├── dist/
│ ├── css/
│ │ ├── swiffy-slider.css
│ │ ├── swiffy-slider.css.map
│ ├── js/
│ │ ├── swiffy-slider.js
│ │ ├── swiffy-slider.js.map
│ │ ├── swiffy-slider.d.ts
│ │ ├── swiffy-slider-extensions.js
│ │ ├── swiffy-slider-extensions.js.map
│ │ ├── swiffy-slider-extensions.d.ts
├── src/
│ ├── swiffy-slider.js
│ ├── swiffy-slider-extensions.js
│ ├── swiffy-slider.css
All distributed files are ESM. Source maps are included for use with browser developer tools.
Have a bug or a feature request? Check out the issues section and see if your issue or idea is already created. If your problem or idea is not addressed yet, please open a new issue.
Swiffy slider documentation website is part of this repo and can be found in the docs folder. Visit the doc on our github documentation page
Swiffy slider is a wrapper defined in html with slides, navigation and indicators as its children.
All options and behavior is controlled with css classes that is added to the wrapper. No js configuration.
The wrapper is the .swiffy-slider element - options to control layout and behavior of slides, navigation and indicators are added to this element.
The slider markup is a .swiffy-slider wrapper that has 3 sections.
- One
.slider-containerthat contains the slides - Two
.slider-navbuttons that is navigation buttons previous and next (optional) - One
.slider-indicatorsthat contains the indicators (optional)
<div class="swiffy-slider [slider options] [navigation options] [indicator options]" data-slider-nav-autoplay-interval="3000">
<ul class="slider-container">
<li>Slide 1</li>
<li>Slide 2</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>
</div>
</div>This example uses ul>li for slides. Can also be i.e. div or other elements. This example uses button for navigation. Could also be divs, but cannot be ul>li as that would be nested. This example uses div>button for indicators but could be other elements, i.e. ul>li structure instead. Wether to use buttons or div for the navigating elements, depends on how WCAG needs to be handled.
Options are the css classes that can be added to the .swiffy-slider element to control how the slider will look and behave. No config in JS or similar.
The example below use the .slider-item-show2 option to show 2 slides and .slider-item-reveal to reveal part of the next and previous slide. By adding additional classes behavior and layout is controlled.
Head over to the configurator to try all options
<div class="swiffy-slider slider-item-show2 slider-item-reveal">
<ul class="slider-container">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>Change behavior and styles on slides, navigation and indicators by adding option css classes to the .swiffy-slider wrapper.
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
swiffy-slider |
The overall wrapper of the slider instance. Should be a block element. Can contain 3 different things as direct children; slider-container, slider-indicators and slider-nav |
For possible child elements to the swiffy-slider wrapper. These sections adds slides, navigation and indicators
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-container |
|
slider-navslider-nav-next |
|
slider-indicators |
|
For the swiffy-slider wrapper. The slider-item-* option classes affects the slides (The slider-container children)
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-item-show2slider-item-show3slider-item-show4slider-item-show5slider-item-show6 |
Shows 2, 3, 4, 5 or 6 slides at a time in the slider wrapper. Each slide is either 1/2, 1/3, 1/4, 1/5 or 1/6 of the slider wrapper width. |
slider-item-show2-sm |
Shows 2 slides at a time in the slider wrapper when in small viewport. By default show2-5 will show only one slide when in viewports less than 62rem (992px in most cases). With this option it shows 2 in small viewports |
slider-item-reveal |
Reveals some of previous and next slide. Each slide is either 1/1, 1/2, 1/3, 1/4 or 1/6 of the slider wrapper width minus a little to reveal next and previous slides |
slider-item-ratio |
Enables ratio sizing of the slide elements. Default ratio is 2:1 or 50% meaning the slides have half the heigh of their width.
This option sets object-fit:cover; on first element inside the slide element - to stretch images to fill out the slide box and keep aspect ratio. |
slider-item-ratio-32x9slider-item-ratio-21x9slider-item-ratio-2x1slider-item-ratio-16x9slider-item-ratio-4x3slider-item-ratio-1x1slider-item-ratio-3x4 |
Controls the slide ratio when ratio is enabled. Default ratio is 2:1 or 50% meaning the slides have half the heigh of their widt. |
slider-item-ratio-contain |
Sets the content of a ratio enabled slide to have object-fit:contain; instead of default object-fit:cover;. This ensures that if the content of the slide is an image or embedded video, it is scaled down so all is visible within the slide box. |
slider-item-nogap |
Removes the horisontal gap between slides |
slider-item-snapstart |
Snaps slides to start of the slider wrapper instead of center when using .slider-item-reveal |
slider-item-nosnap |
Removes auto snapping for slides so they slide freely. Primarily have an affect on touch devices as navigating with arrows and indicators is per slide or per page |
slider-item-nosnap-touch |
Same effect as slider-item-nosnap but only on devices that has a primary input which is not a mouse, i.e. mobile media (hover: none) |
slider-item-first-visible |
Use with .slider-nav-autohide to hide the previous navigation arrow when the slider loads. Will automatically be removed or added when first slide is not or is visible |
slider-item-last-visible |
Use with .slider-nav-autohide to hide the next navigation arrow when the slider loads. Will automatically be removed or added when last slide is not or is visible |
slider-item-helper |
For debugging: Adds a test layout to slide items; minimum height, background color, centers content and background. Meant for testing and should be removed in real code |
For the swiffy-slider wrapper. The slider-nav-* option classes affects the slider-nav elements
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-nav-page |
Slides entire page when showing more than one slide item on the slider wrapper. Default behavior moves just one slide to the left or right |
slider-nav-noloop |
Disables slider loop - so when on first/last slide navigate previous/next does not take the user to the last/first slide |
slider-nav-nodelay |
Disables smooth scrolling when sliding using navigation buttons, indicators and autoplay. Makes the new slide or page appear instantly with no scroll smoothing. Does not affect touch navigation |
slider-nav-autoplay |
Automatically slide to next slide or next page in intervals. Default is 2500 ms = 2.5s |
data-slider-nav-autoplay-interval attribute |
Changes the default autoplay interval - value is in ms. data-slider-nav-autoplay-interval="3000". Default value is 2500, minimum value is 750 ms |
slider-nav-autopause |
Stops and restarts the autoplay when mouse is hovering the slider wrapper or when it is touched on touch devices. Will restart on mouseout, but not when touch ends |
slider-nav-round |
Changes the default navigation arrows to a circle with arrow. Default color is white with black arrow |
slider-nav-touch |
Shows navigation buttons on touch devices. By default navigation buttons are hidden on touch devices using the media (hover: none) query. By adding this option, the navigation buttons are always visible on touch devices |
slider-nav-visible |
Makes the nav buttons visible always. By default navigation buttons are hidden until the slider wrapper is hovered |
slider-nav-outside |
Moves the navigation buttons outside the slider wrapper and shrinks the width of the slider wrapper accordingly (by 3 or 5 rem on each side depending on navigation style) |
slider-nav-outside-expand |
Moves the navigation buttons outside the slider wrapper by applying negative margins (-3 or -5 rem) so the slides and wrapper keeps their size. The navigation buttons overlays surrounding content. |
slider-nav-scrollbar |
Makes the scrollbar for the .slider-container visible. Acts as indicator and navigation if running in css only mode. On touch devices the scrollbar is not shown when not sliding because that is how the browser behaves |
slider-nav-dark |
Changes the navigation buttons to a dark version. Black arrows or black circle with white arrows |
slider-nav-autohide |
Will hide appropiate navigation arrow when the first or last slide is visible to indicate that sliding is at its start or end. On load the arrow will first disappear when the script is loaded. Also add `.slider-item-first-visible` class to the `.swiffy-slider` instance together with `.slider-nav-autohide` to hide the start arrow on load before js executes. |
For the swiffy-slider wrapper. The slider-indicators-* option classes affects the slider-indicators child elements
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-indicators-round |
Changes the default indicators to a circle |
slider-indicators-square |
Changes the default indicators to a square |
slider-indicators-outside |
Moves the indicator buttons under the slider wrapper and increases the height of the slider wrapper but not the slides them selves |
slider-indicators-dark |
Changes the indicator buttons to a dark version |
slider-indicators-highlight |
Hightlights the active indicator even more by increasing its size |
slider-indicators-sm |
Shows indicator buttons on small devices under 992px in width. By default indicator buttons are hidden on small devices. By adding this option, the indicators buttons are always visible. Since the number of indicators and number of slides does not match on small devices when showing more than one item per page, do not use this option in that case |
For the swiffy-slider wrapper. The slider-nav-animation-* option classes affects the animation of slides when they slide into view.
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-nav-animation |
Enables animation on slides. An animation effect class is also required for animation to be enabled |
slider-nav-animation-appear |
Apear animation using opacity and scale - starting from 30% opacity and a 90% scale |
slider-nav-animation-fadein |
Fade in animation using opacity - starting from 50% opacity. Can be combined with .slider-nav-animation-scale/scaleup |
slider-nav-animation-scale |
Scale up animation using scale - starts with 90% size. Can be combined with .slider-nav-animation-fadein |
slider-nav-animation-scaleup |
Scale up animation using scale - starts with 25% size. Can be combined with .slider-nav-animation-fadein |
slider-nav-animation-turn |
Turn animation using rotateY - starts with 70deg ratotation |
slider-nav-animation-slideup |
Slide up animation using translateY - starts at 60% of the height |
slider-nav-animation-zoomout |
Zoom out animation - slides start scaled up at 130% and scale down to normal size as they enter view |
data-slider-nav-animation-threshold attribute |
Changes the default animation threshold - value is between 0-1. data-slider-nav-animation-threshold="0.3". Default value is 0.3. This setting defines how many percent of a slide should be visible before the animation starts |
Mouse drag support is provided as an optional separate module to keep the core small.
Import and initialize alongside the main slider:
import { swiffyslider } from 'swiffy-slider';
import { swiffysliderextensions } from 'swiffy-slider/extensions';
window.addEventListener('load', () => {
swiffyslider.init();
swiffysliderextensions.init();
});Then add the class to any slider wrapper that should support mouse drag:
| CSS class _______________________________ |
Description _______________________________ |
|---|---|
slider-nav-mousedrag |
Enables click-and-drag navigation with the mouse. Requires the extensions module to be loaded and initialized. |
Import swiffyslider from the package and call init() to set up all sliders. All options and behavior is handled by CSS classes — using the methods directly is only needed for advanced scenarios.
| Method _______________________________ |
Description _______________________________ |
|---|---|
swiffyslider.version; |
Needs no explanation :-) |
swiffyslider.init(rootElement = document.body); |
Initializes all instances of .swiffy-slider elements and binds events to handle navigation, indicators and autoplay. By default document.body is searched for instances, but can be limited further to i.e. content area (and skip header, navigation, footer etc) to further improve init performance. |
swiffyslider.initSlider(sliderElement); |
Initializes one instance of swiffy slider wrapper. The passed element has to be a .swiffy-slider element |
swiffyslider.slide(sliderElement, next = true); |
Slides to the next slide or next page depending on the nav settings. The passed slider element has to be a .swiffy-slider element. By default this method slides next, but call it with false to slide to previous |
swiffyslider.slideToByIndicator(event); |
Called internally when an indicator button is clicked. Pass the click event. To navigate programmatically, use slideTo instead. |
swiffyslider.slideTo(sliderElement, slideIndex); |
Slides to the specified slide (index starts with 0 for first slide). The passed slider element has to be a .swiffy-slider element. |
swiffyslider.onSlideEnd(sliderElement, delegate, timeout = 125); |
Provide a callback/delegate function to get called when sliding ends. The default timeout is 125ms and should not be too low as it could cause the delegate to be called more than once on each scroll.
The passed slider element has to be a .swiffy-slider element.
|
swiffyslider.autoPlay(sliderElement, timeout, autopause); |
Manually starts autoplay for a container using the specified timeout. Autopause can be enabled. Usually auto play is handled using css option classes. This method can be used to start autoplay when the slider scrolls into view or similar. The passed slider element has to be a .swiffy-slider element. |
swiffyslider.handleIndicators(sliderElement); |
Manually updates the indicators active state to reflect the current position of the slider. The passed slider element has to be a .swiffy-slider element. |
Listening for sliding ends for a container
<script>
const sliderElement = document.getElementById('myslider');
swiffyslider.onSlideEnd(sliderElement, function() {
console.log('Scrolling stopped');
});
</script>Listening for sliding ends for a container and find visible slides
window.addEventListener('load', () => {
const sliderElement = document.getElementById('myslider');
swiffyslider.onSlideEnd(sliderElement, () => {
const visibleSlideElements = getVisibleSlides(sliderElement);
console.log(visibleSlideElements.map(s => s.innerText));
});
});
function getVisibleSlides(sliderElement) {
const container = sliderElement.querySelector('.slider-container');
const gapWidth = parseInt(window.getComputedStyle(container).columnGap);
return [...container.children].filter(slide => {
const left = slide.getBoundingClientRect().left - container.getBoundingClientRect().left;
const right = left + slide.offsetWidth - gapWidth;
return left >= 0 && right <= container.offsetWidth;
});
}Swiffy Slider v2 is ESM only. Import and initialize in your entry point:
import { swiffyslider } from 'swiffy-slider';
import 'swiffy-slider/css';
window.addEventListener('load', () => swiffyslider.init());To initialize only part of the page (e.g. skip header/footer for faster init):
window.addEventListener('load', () => {
swiffyslider.init(document.getElementById('content'));
});To initialize a single slider:
swiffyslider.initSlider(document.getElementById('myslider'));Load on demand via dynamic import (e.g. when slider scrolls into view):
<script type="module">
window.addEventListener('load', () => {
import('https://cdn.jsdelivr.net/npm/swiffy-slider@2.1.0/dist/js/swiffy-slider.js').then(({ swiffyslider }) => {
swiffyslider.init();
});
});
</script>The package ships TypeScript declaration files (.d.ts) for both the core and the extensions module. No @types/ package is needed.
TypeScript users get full type checking automatically:
import { swiffyslider } from 'swiffy-slider';
import { swiffysliderextensions } from 'swiffy-slider/extensions';
window.addEventListener('load', () => {
swiffyslider.init();
swiffysliderextensions.init();
});JavaScript users with // @ts-check or VS Code's implicit type checking get full IntelliSense from the JSDoc annotations in the source without any extra setup.
The Swiffy Slider CSS is making use of a number of CSS variables that can be overriden to control behavior and styling
Slide sizes, ratios, navigation etc. can be controlled by overruling the variable on the .swiffy-slider instance or in custom css.
| Variable | Example | Description |
|---|---|---|
--swiffy-slider-item-width |
--swiffy-slider-item-width:75%; |
Calculated based on the number of slides shown, the gap, reveal etc. Should not be overriden. INFO If needed, it has to be overriden on the .slider-container element. |
--swiffy-slider-item-gap |
--swiffy-slider-item-gap:25px; |
Changes the gap between slides when enabled. Default --swiffy-slider-item-gap is 1rem, but can be any valid CSS mesurement. The --swiffy-slider-item-gap is part of the calculation of
--swiffy-slider-item-width |
--swiffy-slider-item-reveal |
--swiffy-slider-item-reveal:20%; |
Changes the width of the reveal of next and previous slides when enabled. Default --swiffy-slider-item-reveal is 8rem if previous and next is revealed and 4rem if only next is revealed (if .slider-item-snapstart is in use). The --swiffy-slider-item-reveal is part of the calculation of --swiffy-slider-item-width |
--swiffy-slider-item-ratio |
--swiffy-slider-item-ratio:100/33.3 |
Sets the ratio to a custom value. Use with .slider-item-ratio and omit use of any .slider-item-ratio-* classes |
--swiffy-slider-item-count |
--swiffy-slider-item-count:8; |
Sets the number of slides to show - same as using .slider-item-show{n} but can i.e. be set to a number higher than 6 if needed. |
--swiffy-slider-nav-light |
--swiffy-slider-nav-light:lightcyan; |
Sets the light color for navigation arrows. Default is #fff. Use to control the color of light navigation. Square and Round navigation use both colors - one for backgrond, the other for arrow color. |
--swiffy-slider-nav-dark |
--swiffy-slider-nav-dark:darkolivegreen; |
Sets the dark color for navigation arrows. Default is #333. Use to control the color of dark navigation. Square and Round navigation use both colors - one for backgrond, the other for arrow color.
Can be any color variable.
|
--swiffy-slider-nav-zoom |
--swiffy-slider-nav-zoom:1.25; |
Use to overrule the navigation arrow sizes. Default is 1 for normal sizes and .75 for small sized navigation. Set to i.e. 1.25 to make navigation arrows larger. |
--swiffy-slider-track-opacity |
--swiffy-slider-track-opacity:0.25; |
Sets the scrollbar track opacity when scrollbar is displayed |
--swiffy-slider-track-height |
--swiffy-slider-track-height:1rem; |
Sets the scrollbar track height. Default is .5rem if scrollbar (.slider-nav-scrollbar) is enabled. |
--swiffy-slider-animation-duration |
--swiffy-slider-animation-duration:0.75s |
Sets the animation duration. Default is 0.75s. Using .swiffy-slider-animation-fast sets the duration to .25s. Using .swiffy-slider-animation-slow sets the duration to 1.25s |
--swiffy-slider-animation-delay |
--swiffy-slider-animation-delay:0.5s; |
Sets the delay before animation begins when a new slide scrolls into view. Default is 0s (no delay). |
--swiffy-slider-animation-timing |
--swiffy-slider-animation-timing:ease-in-out; |
Sets the animation timing method, default is ease-in-out. |
Example
<div class="swiffy-slider slider-item-reveal slider-item-ratio slider-nav-round slider-nav-visible"
style="
--swiffy-slider-item-ratio:100/33.3;
--swiffy-slider-nav-light:lightcyan;
--swiffy-slider-nav-dark:darkolivegreen;
--swiffy-slider-nav-zoom:.85;
--swiffy-slider-item-reveal:25%;">
<ul class="slider-container">
<li>...</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>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.
v2 is ESM only and removes auto-initialization. Here is what changed:
Script loading
<!-- v1 -->
<script src="swiffy-slider.min.js" defer></script>
<!-- v2 -->
<script type="module">
import { swiffyslider } from 'swiffy-slider';
window.addEventListener('load', () => swiffyslider.init());
</script>No more window.swiffyslider — import the named export instead:
// v1
window.swiffyslider.init();
// v2
import { swiffyslider } from 'swiffy-slider';
swiffyslider.init();data-noinit is removed — v2 never auto-initializes. Always call swiffyslider.init() yourself.
slideToByIndicator() now requires an event argument — this is called internally and you should not need to call it directly. Use slideTo() instead.
Dist file paths changed:
| v1 | v2 |
|---|---|
dist/js/swiffy-slider.min.js |
dist/js/swiffy-slider.js |
dist/js/swiffy-slider.esm.min.js |
dist/js/swiffy-slider.js (same file) |
dist/css/swiffy-slider.min.css |
dist/css/swiffy-slider.css |
npm package exports changed:
// v1
import { swiffyslider } from 'swiffy-slider' // → src/swiffy-slider.esm.js
import 'swiffy-slider/css'
// v2
import { swiffyslider } from 'swiffy-slider' // → dist/js/swiffy-slider.js
import { swiffysliderextensions } from 'swiffy-slider/extensions'
import 'swiffy-slider/css'# Install dependencies
npm install
# Build once (outputs to dist/ and docs/assets/)
npm run build
# Watch mode — rebuilds on every save
npm run watch
# Watch + local dev server at http://localhost:5501
npm run devSource files are in src/. The build is handled by build.js using esbuild (JS) and lightningcss (CSS) — no bundler config files needed. After each build, output is automatically copied to docs/assets/ so the local docs site reflects your changes immediately.
See CONTRIBUTING.md for full details.
Open tasks you could help with:
- Svelte component wrapper
- Vue component wrapper
- React component wrapper
Thank you for your understanding.
Feel free to star this project and help spread the word.
Open an issue or reach out via @nicped on GitHub to have your site added to this list.
See the Releases section of our GitHub project for changelogs for each release version of Swiffy Slider.
Nicolai Høeg Pedersen
Dynamicweb
Code and documentation copyright 2022 the Swiffy Slider Authors and Dynamicweb A/S Code released under the MIT License. Docs released under Creative Commons.
