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

  • By Dynamicweb Software A/S
  • Last update: Jan 2, 2023
  • Comments: 17

Swiffy Slider Logo

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 npm version CSS gzip size CSS Brotli size JS gzip size JS Brotli size

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

<script src="[email protected]/dist/js/swiffy-slider.min.js" defer>
<link href="[email protected]/dist/css/swiffy-slider.min.css" rel="stylesheet">

2. Add markup

<div class="swiffy-slider slider-item-helper">
    <ul class="slider-container">
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>

    <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>

Swiffy Slider script automatically binds to all .swiffy-slider instances

Additional installation options

  • Download the latest release
  • Clone the repo: git clone
  • Install with npm: npm install swiffy-slider
  • Install with yarn: yarn add swiffy-slider

Read the Getting started page for examples, configuration options and a visual configurator.


  • 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.init or swiffyslider.initSlider
  • Scripting - Execute scripts when an item is done sliding using swiffyslider.onSlideEnd
  • Scripting - Start and stop automatic sliding using script

What's included

Within the download you'll find the following directories and files. You'll see something like this:

├── dist/
│   ├── css/
│   │   ├── swiffy-slider.min.css
│   │   ├──
│   ├── js/
│   │   ├── swiffy-slider.ESM.min.js
│   │   ├──
│   │   ├── swiffy-slider.min.js
│   │   ├──

The download contains compiled and minified CSS and JS (swiffy-slider.min.*). source maps (swiffy-slider.*.map) are available for use with certain browsers' developer tools.

Bugs and feature requests

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.

Markup structure

The slider markup is a .swiffy-slider wrapper that has 3 sections.

  • One .slider-container that contains the slides
  • Two .slider-nav buttons that is navigation buttons previous and next (optional)
  • One .slider-indicators that 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>

    <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>

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.

Slider options (CSS Classes)

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>

Slider wrapper

Change behavior and styles on slides, navigation and indicators by adding option css classes to the .swiffy-slider wrapper.

CSS class
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

Slider sections

For possible child elements to the swiffy-slider wrapper. These sections adds slides, navigation and indicators

CSS class
  • Creates the scrollable container that holds the slides
  • Can be any element and is a CSS grid
  • Using a ul>li structure for the container and slides provides good semantics
  • The direct descendants of this element are the slides them selves and can hold any markup
  • The width of the slides are controlled by the slider options. Default is 100% width
  • Can be styled using slider-item-* options
  • Creates a navigation button
  • Should be button element and there should be exactly 2
  • Default is a left button
  • Add slider-nav-next to make the next button
  • Can be styled using slider-nav-* options
  • Creates a container for indicator buttons
  • The direct descendants of this element are the indicators. Add active for the active indicator for first load
  • Descendants should be button elements and there should be one button per slide or per page when showing more than one slide
  • Can be styled using slider-indicators-* options

Slider options

For the swiffy-slider wrapper. The slider-item-* option classes affects the slides (The slider-container children)

CSS class
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-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.
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-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

Navigation options

For the swiffy-slider wrapper. The slider-nav-* option classes affects the slider-nav elements

CSS class
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 last slide navigate next does not take the user to the 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

Indicator options

For the swiffy-slider wrapper. The slider-indicators-* option classes affects the slider-indicators child elements

CSS class
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

Animation options

For the swiffy-slider wrapper. The slider-nav-animation-* option classes affects the animation of slides when they slide into view.

CSS class
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
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


The Swiffy Slider script can be accessed using window.swiffyslider or simply swiffyslider

All options and behavior is handled by the css classes, so using the scripts directly is only for more advanced scenarios.

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(); This method is called when an indicator button is clicked. Should not be called directly. Instead call slideTo
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

const sliderElement = document.getElementById('myslider');
swiffyslider.onSlideEnd(sliderElement, function() {
    console.log('Scrolling stopped');

Listening for sliding ends for a container and find visible slides

window.addEventListener(&#39;load&#39;, () =&gt; {
    const sliderElement = document.getElementById(&#39;myslider&#39;);
    swiffyslider.onSlideEnd(sliderElement, function() {
        const visibleSlideElements = getVisibleSlides(sliderElement);
        const visible = [];
        for (const slide of visibleSlideElements) {

function getVisibleSlides(sliderElement) {
    const container = sliderElement.querySelector('.slider-container');
    //returns an array of slide elements that are fully or partially visible
    const visibleSlides = [];
    //We are using a grid layout and the slides left and right properties include the width of the gap, so when comparing with container width add a gap for each side of the slide gap.
    const gapWidth = parseInt(window.getComputedStyle(container).columnGap);
    for (const slide of container.children) {
        var slideScrollLeftPosition = slide.getBoundingClientRect().left - container.getBoundingClientRect().left;
        var slideScrollRightPosition = slideScrollLeftPosition + slide.offsetWidth - gapWidth;
        if (slideScrollLeftPosition &gt;= 0 &amp;&amp; slideScrollRightPosition &lt;= container.offsetWidth) {
    return visibleSlides;

Javascript loading and binding

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

<script src="[email protected]/dist/js/swiffy-slider.min.js" data-noinit defer>
    window.addEventListener('load', () => {
        //Use only one of the loading options below!
        //loads all sliders
        //loads specific slider
<div class="swiffy-slider" id="myslider">
  <div class="slider-container">
<script src="[email protected]/dist/js/swiffy-slider.min.js" data-noinit defer>
    window.addEventListener('load', () => {
        //loads all sliders in main and skip header and footer search for increased init performance.
<main id="content">
  <div class="swiffy-slider" id="myslider">
    <div class="slider-container">

Load as module using ES version of the script

<script type="module">
    import {swiffyslider} from '[email protected]/dist/js/swiffy-slider.ESM.min.js'; 
    window.swiffyslider = swiffyslider; 

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.

window.addEventListener("load", () => {
    import ('[email protected]/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {

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

window.addEventListener("load", () => {
    import ('[email protected]/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
        window.swiffyslider = swiffysliderModule.swiffyslider;

CSS variables

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.


<div class="swiffy-slider slider-item-reveal slider-item-ratio slider-nav-round slider-nav-visible" 

    <ul class="slider-container">

    <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>

Safari smooth scrolling polyfill

Sliding the carousel on touch devices using fingers are not affected by this issue.

When sliding using buttons, indicators and javascript, the new slides are shown instantly with no smoothing when using Safari.

In Safari based browsers, smooth scrolling is not supported because it is still lacking browser support. See Can I use

If you want to support smoooth scrolling on Safari based browsers, add this polyfill to your head section

<script src=""></script>


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 (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.


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.

Stargazers repo roster for @dynamicweb/swiffy-slider


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


Nicolai Høeg Pedersen


Copyright and license

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



  • 1

    Two clicks to jump from the last slide to the first when "Mouse draggable" is active


    when "Mouse draggable" is set, the last slide switches to the first slide after repeated mouse click only. The first click on the right arrow makes the slide twitch a bit, and it switches only after the second click.

    Tested on the latest FF, Chrome, and Chrome Canary.

    You can check it on the first example from the Configurator with these settings.

    Unfortunately, it isn't reproduced all the time on the configurator page, but I have this issue 100% of the time on my test page. I can email it to you if that's ok.

  • 2

    Differents height for images

    Is your feature request related to a problem? Please describe. For a web application, we let users upload images, but we end up with images of different sizes

    Describe the solution you'd like It is possible to have a height that changes according to the size of the images rather than the size of the images ?

    Additional context At the end of this slider, there is an example of Autoheight

    I like your slider, very easy to use :)

  • 3

    No loop in Chromium with zoom/scaling

    The loop stops working when the browser is zoomed out or in (and with some zoom levels it still loops) or when OS is set up to interface scaling. Maybe it has something to do with grid-auto-columns.

    Applies to at least Chrome, Edge.

  • 4

    Autoplay don't work on mobile

    Describe the bug The slider work fine on desktop and on the adaptative view on desktop, but on my mobile the autoplay don't work, i see only the first image. (scroll works)

    Smartphone (please complete the following information):

    • Device: S20fe and iPhone XR
    • OS: iOS 16, android 13
    • Browser: Safari, chrome and firefox

    Additional context

  • 5

    Script skips images

    Describe the bug On a 5 image-slider, the script skips 2 and 4. You can see that the button list below is visited only on 1, 3 and 5. Why?

    CleanShot 2022-04-21 at 08 15 11

    The code is as follows:

    <div id="employees" class="swiffy-slider slider-nav-outside slider-nav-visible slider-nav-nodelay slider-nav-autoplay slider-nav-autopause slider-item-show1 slider-indicators-outside slider-nav-animation slider-nav-animation-fadein slider-nav-animation-slow slider-item-last-visible" data-slider-nav-autoplay-interval="5000"> <ul class="slider-container"> <li class="employee"> <img src="" alt="Erika"> <div> <div id="hs_cos_wrapper_module_165049619677012_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_text" data-hs-cos-field="employee_title"></div><br>Erika </div> </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=""></button> <button></button> <button class=""></button> <button></button> <button class="active"></button> </div> </div>

    The script is fired this way:

    window.addEventListener('load', () => { swiffyslider.initSlider(document.getElementById('employees')); });

  • 6

    Standard Sass and CSS import doesn't seem to be working?

    Hi, I couldn't find documentation on how to import the CSS files outside of JS. I see there's another similar issue over here: (I'm currently using version 1.5.1, which should have fixed that).

    Currently, doing @import "swiffy-slider"; or @import swiffy-slider/dist/css/swiffy-slider; causes a whole lot of problems with Vite.js (which uses esbuild under the hood). For instance:

    Error: Missing "./dist/css/swiffy-slider" export in "swiffy-slider" package
    Error: Failed to resolve entry for package "swiffy-slider". 
    The package may have incorrect main/module/exports specified in its package.json: 
    Failed to resolve entry for package "swiffy-slider"

    PS.: This might not have anything to do with it, but after looking at other packages, I notice that style and exports don't usually start with ./.

  • 7

    [Feature Request] Ken burns / zoom slide effect when showing

    Please add the ability to make the slides zoom while displaying Example I found on codepen:

    Also for ADA/WCAG, please allow a pause button option

    Otherwise this slider is the best modern slider! Thank you

  • 8

    automatic and responsive indicators

    Is your feature request related to a problem? Please describe. could not find any solution where indicators are automatically and responsively generated according number of slides

    Describe the solution you'd like calculate number of "pages" and insert the same amount of indicators to DOM accordingly

    Describe alternatives you've considered none :)

    Additional context currently it's hardcoded and thus not responsive

  • 9

    Random Scrollposition

    Describe the bug The position of the scrollbar is random and changes upon refresh.

    To Reproduce

    1. Go to
    2. Scroll down to sliders
    3. Check scroll positions
    4. Refresh to see changing random position

    Expected behavior With class slider-item-snapstart the scrollposition should be start, not a random position.

    Screenshots screenshot-lautstark-jrk de-2022 10 11-09_37_12


    • OS: Windows
    • Browser: Chrome
    • Version 106.0.5249.103

    Problem seems not to occur on the following setups IOS Safari & Chrome Windows Firefox

  • 10

    undefined is not an object

    Describe the bug We use error tracking software on our website and an event that is popping up regualrly relates to

    'undefined is not an object' f(t&&,"addEventListener")){T(t,"addEventListener",function(o){var i={component:"".concat(e,".prototype

    Crashed in non-app: ./node_modules/swiffy-slider/src/swiffy-slider.esm.js in handleIndicators

    To Reproduce unfortunatly we cannot provide steps to reproduce due to it been an intermittent issue.

    Expected behavior expected it not to occur?

    Screenshots N/A

    Desktop (please complete the following information):

    • Majority on Safari v15+
    • Mac (18%)

    Smartphone (please complete the following information):

    • Safari Mobile 15.5 and 15.6 (57%)
    • Iphone (74%)

    Additional context Our application is on NEXTJS.

    and example of how swiffy is rendered in a component.

    import React, { useState, useEffect, useRef } from 'react';
    import Link from 'next/link';
    import Container from '../../Container';
    import Image from 'next/image';
    import Headings from '../../heading/Heading';
    import { swiffyslider } from 'swiffy-slider';
    function Classic({ data, title, cta }) {
      const { _metadata, content } = data.classic;
      const sliderRef = useRef()
      let dotsClass = 'desktop:hidden bg-dark'
      useEffect(() => {
      }, [])
      return (
        <section id={_metadata.uid} className="content-list bg-dawn-grey-10 standard-padding">
          <Container fullPage={false}>
            <Headings headingContent={title} headingClassName='h4 md:h2 text-center mx-12 mb-10' />
            <div className="block md:flex flex-row flex-wrap w-full justify-between mx-auto">
              <div className={`content-list-slider swiffy-slider slider-nav-autoplay slider-nav-visible slider-indicators-sm`} data-slider-nav-autoplay-interval={3000} ref={sliderRef}>
                <ul className="slider-container" tabIndex={0}>
                  {, index) => {
                    return (
                      <li className="flex-1 px-4 mb-2.5" key={index}>
                        <div className="relative">
                            alt={item.image.title.replace(/\.[^/.]+$/, "")}
                        {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == true ? <OverlayIcon icon={item.overlay_content.icon} /> : ""}
                        {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == false ? <OverlayText text={item.overlay_content.text} /> : ""}
                        <h3 className="sh10 md:sh9 text-center mb-2">{item.title}</h3>
                        <p className="text-center max-w-sm mx-auto body-r">{item.description}</p>
                <div className={`slider-indicators slider-indicators-round z-30`}>
                  {, index) => {
                    return (
                      // set first indicator to 'active'
                      <button key={`slider-indicator-${index}`} className={`${index === 0 ? 'active' : ''} ${dotsClass} slider-indicator`}>
                        <span className="sr-only">Slide {index}</span>
            <CallToAction show={cta.show_cta} data={cta} />
  • 11

    If "Mouse draggable" is set, swiping on mobile does not work

    Currently if "Mouse draggable" is set, it is not possible on mobile phones to drag the slider. I think is a problem and UX could be improved

    Describe the solution you'd like For a better/expected UX it should still be possible to swipe on smartphones even if the setting "Mouse draggable" is set.

    Thank you!

  • 12

    Stop Autoplay on click

    Introduces/changes the following functionalities:

    1. Autoplay stops when the user interacts (clicks/taps prev or next buttons or slider indicators) For the case that the design features a pause button shown onhover (to indicate the "pause on hover" functionality), the class "slider-nav-autopause" is removed
    2. Easier way to set the delay with which the indicators react
  • 13

    Download button on does not work

    When I click on the top right download button on , I get redirected here: There, I am told "Not Found".

    This link works:

  • 14

    Remove html template tag from children

    The problem solved with this PR is about the tag "template" who is parsed as an slide or an indicator when the library init the slider.

    See issue

  • 15

    Remove "template" tag from children of .slider-container and .slider-indicators making library compatible with AlpineJS

    Is your feature request related to a problem? Please describe. I want the library to be compatible with AlpineJs and the Web HTML Element "template". AlpineJS use the "template" element for every actions, loop etc... and SwiffySlider take alld child element to display indicators and slide. See AlpineJS Templating usage :

    Describe the solution you'd like I already implemented the solution (PR in preparation) it simply consist in excluding the "template" from the children and let all other tags as is


  • 16

    Bare bones version?

    Is there the possibility to make a "bare bones" version of Swiffy Slider? Or does that not fit into the concept?

    I have replaced a couple of old sliders on clients' websites with Swiffy Slider, and for the new slider to fit into the whole design, I had to override quite a bit of the CSS.

    I do love the possibility to style the slider just by adding classes, and I am not overly bothered by loading CSS I don't end up using. But it would be great to have a .pure class (or something) that does not style the elements, so I only have to add, not to override.

    As I have said before – your slider is a dream come true when I had already given up on looking for something usable and also on trying to write my own. Many, many thanks for this great piece of software – and no less for the stellar support!

  • 17

    Safari issue with slider buttons on full screen

    Describe the bug Slider buttons not working on Safari iOS, iPadOS, MacOS,... on fullscreen module.

    To Reproduce Steps to reproduce the behavior:

    1. Go to
    2. Click on the image to open the fullscreen module.
    3. Try to click the buttons to go to the next or previous.
    4. No response

    **Desktop **

    • OS: MacOS 12.3.1
    • Browser Safari
    • Version 15.4


    • Device: Iphone 12 Pro
    • OS: iOS 15.4.1
    • Browser: Safari
    • Version: 15.4

    Additional information When disabling the CSSOM View Smooth Scrolling, the buttons work again. Safari>Develop>Experimental features>CSSOM View Smooth Scrolling.

    Tried adding the package for smooth scroll polypill, but that doesn't seem to help.