Swiffy Slider Configuration

Easy configuration of Swiffy Slider

Use the configuration panel to create the required markup with css option classes and show a preview of the slider.

Preview
Markup
                                
<div class="swiffy-slider">
    <ul class="slider-container">
        <li></li>
        <li></li>
        <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>
                            
                            
Configuration options
Layout
Slides
Navigation
Navigation arrows is shown when hovering the slider. Enable to see your config right away.
Timeout ms
data-slider-nav-autoplay-interval attribute
Indicators
Animation
Debugging
CSS variable overrides
Navigation light color
--swiffy-slider-nav-light variable
Navigation dark color
--swiffy-slider-animation-duration variable
Animation duration
--swiffy-slider-animation-delay variable
Animation delay
--swiffy-slider-animation-timing variable
Animation timing
--swiffy-slider-nav-dark variable
Dragging slides with mouse

WARNINGRequires swiffy-slider-extensions.min.js to be included.

https://cdn.jsdelivr.net/npm/swiffy-slider@1.5.3/dist/js/swiffy-slider-extensions.min.js