Swiped.

The lightweight responsive CSS based slider carousel supporting multiple items

 

Swiped is based on Flexbox and CSS Scroll Snap and can operate completely without JS (No arrow support)

 

View on Github

 

Getting Started

Using Swiped can be as simple as a single CSS Include!

 

Use generated CSS and JS from Github

The simplest way to get started is copy the following files from github and include in your project.

<script src="dist/swiped.min.css"></script>
<script src="dist/swiped.min.js"></script> // Only required when using arrows

 

Take control with Sass!

This library is built using Sass. You can customise things such as column gap by using the Sass directly.

@import 'swiped.scss';

The Basic Markup

Swiped has a very simple markup, you just need a container, body, items and tell it how many columns you want.

 

<div class="swiped" data-swiped-item-count="2">
    <div class="swiped-items">
        <div class="swiped-item">
            <img src="https://picsum.photos/200/400?1">
        </div>
        <div class="swiped-item">
            <p>Hello</p>
        </div>
        <div class="swiped-item">
            <img src="https://picsum.photos/200/400?3">
        </div>
        ...
    </div>
</div>

Responsive Columns

Swiped responsive columns are mobile first, so if you only set the default, all devices will see the same.

 

Same across all devices 

<div class="swiped" data-swiped-item-count="5">

 

Show 3 on mobile and 5 on desktop 

<div class="swiped"
                data-swiped-item-count="3"
                data-swiped-item-count-desktop="5">

 

Show 2 on mobile, 3 on tablet and 6 on desktop 

<div class="swiped"
                data-swiped-item-count="2"
                data-swiped-item-count-tablet="3"
                data-swiped-item-count-desktop="6">

Going Gapless!

Although spacing is great, sometimes you may want to remove spacing altogether.

 

Gapless across all devices 

<div class="swiped swiped-is-gapless" data-swiped-item-count="5">

 

Tablet and below 

<div class="swiped swiped-is-gapless-tablet" data-swiped-item-count="5">

 

Mobile only 

<div class="swiped swiped-is-gapless-mobile" data-swiped-item-count="5">

Preview Next Item

The best way to show that an element can be swiped on mobile is to have a preview of the next item.

 

Preview across all devices 

<div class="swiped swiped-has-preview" data-swiped-item-count="5">

 

Tablet and below 

<div class="swiped swiped-has-preview-tablet" data-swiped-item-count="5">

 

Mobile only 

<div class="swiped swiped-has-preview-mobile" data-swiped-item-count="5">

Pad all the things.

Gaps are great but sometimes you also want them on the outside. This property adds a gap to both the left and right.

 

Padding across all devices 

<div class="swiped swiped-has-padding" data-swiped-item-count="5">

 

Tablet and below 

<div class="swiped swiped-has-padding-tablet" data-swiped-item-count="5">

 

Mobile only 

<div class="swiped swiped-has-padding-mobile" data-swiped-item-count="5">

Preview + Padding

Get the best of both worlds by combining an item preview and left side padding for the ultimate mobile preview.

 

Padded Preview across all devices 

<div class="swiped swiped-has-padded-preview" data-swiped-item-count="5">

 

Tablet and below 

<div class="swiped swiped-has-padded-preview-tablet" data-swiped-item-count="5">

 

Mobile only 

<div class="swiped swiped-has-padded-preview-mobile" data-swiped-item-count="5">

Gapless Preview.

So you love gapless and love previews, no problems we have you covered.

 

Gapless preview across all devices 

<div class="swiped swiped-has-gapless-preview" data-swiped-item-count="5">

 

Tablet and below 

<div class="swiped swiped-has-gapless-preview-tablet" data-swiped-item-count="5">

 

Mobile only 

<div class="swiped swiped-has-gapless-preview-mobile" data-swiped-item-count="5">

Arrows or whatever

We decided to let you do what you like when it comes to controlling. That's why we just provide support for a data attribute.

 

Step 1 

<div class="swiped" id="swiped2" data-swiped-item-count="5"> // Add an ID to your Swiped container.

Step 2 

<button data-swiped-back="swiped2">Back</button> // Add data-swiped-back to something with the Swiped ID.

Step 3 

<button data-swiped-next="swiped2">Next</button> // Add data-swiped-next to something with the Swiped ID.
Make sure you have included the JS file. This will register the data-attributes.

Done!

 

Back

Next

Why I built it.

 

There are a tonne of great libraries already, but...

 

I wanted to use AOS on the initial items.

 

I also love to avoid browser reflow, slider libraries are one of the worst.

 

I wanted 80 sliders on a single page, so needed performance.

 

Plus it's fun to mess around.