Swiffy Slider

https://www.swiffyslider.com/docs/

Admin

Swiffy Slider is a lightweight, high-performance slider and carousel library that uses modern CSS...

Tokens:693

Snippets:11

Trust Score:6.5

Update:6 months ago

Show doc for...

Tokens:

Raw

### Initialize Swiffy Slider via ESM

Source: https://www.swiffyslider.com

Include the library via CDN and initialize it on window load.

```html
<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" crossorigin="anonymous">
```

--------------------------------

### Define Slider Markup

Source: https://www.swiffyslider.com

Basic HTML structure required to render a slider with navigation buttons and indicators.

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

Tokens:

Raw