🥨 Snap Slider
Remember when sliders were simple?
When you could do whatever you wanted because your plugin wouldn't stop you?
That's what Snap Slider is all about.
💁♀️ Basic Example
CSS Scroll Snap makes sliders as simple as a few lines of CSS, but you still need JavaScript for things like buttons and event handlers.
With Snap Slider, adding active classes, change events, and pagination is as easy as adding a data-snap-slider attribute to your HTML.
<ul class="slider" data-snap-slider="basic-example">
<li class="slide">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
</ul>
🗺 Navigation
To add navigation, add a data-snap-slider-nav attribute to your nav container.
<ul data-snap-slider-nav="basic-example">
<li><button type="button">Previous</button></li>
<li><button type="button">1</button></li>
<li><button type="button">2</button></li>
<li><button type="button">3</button></li>
<li><button type="button">4</button></li>
<li><button type="button">Next</button></li>
</ul>Snap Slider is smart enough to pick up on numbers like 1, 2, 3, or common words like "previous" and "next" in your nav buttons.
But if you need to specify which buttons go where, just add the data-snap-slider-goto attribute.
<ul data-snap-slider-nav="basic-example">
<li><button type="button" data-snap-slider-goto="prev">Previous</button></li>
<li><button type="button" data-snap-slider-goto="1">1</button></li>
<li><button type="button" data-snap-slider-goto="2">2</button></li>
<li><button type="button" data-snap-slider-goto="3">3</button></li>
<li><button type="button" data-snap-slider-goto="4">4</button></li>
<li><button type="button" data-snap-slider-goto="next">Next</button></li>
</ul>📺 Responsive
Now how do I turn this off?
Say you have an element that needs to be a slider on mobile, but a grid on desktop.
Easy: just add CSS overflow: hidden.
If your slider can't scroll, we won't do anything.
♿️ Accessibility
Snap Slider follows the W3C's guide for accessible carousels.
For example, users can easily focus and navigate between slides using tab, space, and arrow keys.
🙈 Center "Peek" Slider
Since Snap Slider doesn't care about styles, you can customize your slider however you want.
Making a centered "peeking" slider is as easy as a few lines of CSS.*
*Note: "Peek" styles can be tricky. Browsers remove the outer margin / padding from scrollable overflow areas by default, and there's a wild debate over how & whether to fix it.
But fear not!
🔮 Scrollfix
In the spirit of the late clearfix hack, here's how we recommend tricking browsers to include margin / padding in scrollable overflow areas.
We call it the "scrollfix" hack:
/**
* Fix overflow scroll ignoring margin/padding.
* @see https://chenhuijing.com/blog/flexbox-and-padding/
* @see https://itnext.io/horizontal-overflow-with-flexbox-css-64f530495303
*/
.scrollfix::before,
.scrollfix::after {
content: '';
display: inline-block;
flex: 0 0 auto;
width: 1px;
margin-left: -1px;
}Simply add this CSS to your own project and you should be good to go.
For more details on how browsers handle overflow areas, read Chen Hui Jing's riveting article, Flexbox and padding.
🧛♂️ Vertical Slider
But wait!
You'd rather scroll up & down?
Just tweak your CSS and voila, you've got yourself a vertically scrolling slider.
😲 2D Slider
That's right. Any way you scroll, we can handle it.*
*Note: Depending on the browser, mandatory snapping in both directions can be very sensitive. For more details, see CSS Scroll Snap Module: Snap Scope and Scroll Types.
🤯 Nested Sliders
We can hardly think of any practical uses for this, but what the hey. Why not?
🐛 Debugging
Now, we know we said it'd be easy. But sometimes it isn't!
Use SnapSlider.debug() to find your way again.
// Running any of these...
SnapSlider.debug('slider-id');
SnapSlider.debug('.slider-class');
SnapSlider.debug(element);
SnapSlider.debug(elements);
// will console.log()...
┌──────────────┐
| 🥨 Slider |
└──────────────┘
<ul class="example" data-snap-slider="example">…</ul>
1. What slider is this?
Slider ID
"example"
Slider Object
{options: {…}, terms: {…}, container: ul.example, id: "example", loop: false, …}
2. What navs target this slider?
Navs
[ul.example-nav]
3. What buttons target this slider?
Buttons
(6) [button.example-nav__button, button.example-nav__button.is-current, button.example-nav__button, button.example-nav__button, button.example-nav__button, button.example-nav__button]
Click each question to reveal more details.