Scroll Snap Slider is an elegant, performant solution for creating seamless sliders on your website with minimal JavaScript and fully leveraging modern CSS capabilities. In this article, we will guide you through the process of setting up a Scroll Snap Slider. Prepare to amaze your visitors with smooth transitions and great functionality!

Table of Contents

• Premise
• Sizes
• Restrictions
• Installing
• Usage
• API
• Events
• Public Properties
• Support

Premise

This library provides a straightforward implementation of a popular feature found on various websites. It’s designed to keep things minimalist and offers a clean API for smooth integrations. You can extend its functionality easily, thanks to the ES6 class-based structure.

Sizes

Here’s a breakdown of the sizes of individual modules:

Item                 minified (terser)  minified + gzipped
------------------------------------------------------------
index                348 B              143 B
ScrollSnapAutoplay   1479 B             559 B
ScrollSnapDraggable  2531 B             778 B
ScrollSnapLoop       1849 B             615 B
ScrollSnapPlugin     70 B               110 B
ScrollSnapSlider     2336 B             806 B

Restrictions

Note that this library is limited to handling sliders on the X-axis only. For more features, you may check out:

• Glider.js
• Snap Slider

Installing

To install the Scroll Snap Slider package, simply run one of the following commands in your terminal:

npm install scroll-snap-slider
yarn add scroll-snap-slider

Usage

The Scroll Snap Slider class enhances a slider with several events and methods.

Markup

Your HTML structure should look like this:

<ul class="scroll-snap-slider">
    <li class="scroll-snap-slide"><img alt="" src="https://picsum.photos/id/1011400300"/></li>
    <li class="scroll-snap-slide"><img alt="" src="https://picsum.photos/id/1018400300"/></li>
</ul>

CSS

Add the following line in your CSS file:

@import 'scroll-snap-slider';

Additional Styles

To enhance usability, you can prevent page navigation during horizontal scrolling on macOS by adding these styles:

css
.scroll-snap-slider {
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}
.scroll-snap-slide {
    scroll-snap-stop: always;
}

JavaScript

If you’re not looking for any additional behavior, you can skip adding JavaScript. However, to enable basic functionality, you can do the following:

import ScrollSnapSlider from 'scroll-snap-slider';
const element = document.querySelector('.example-slider');
const slider = new ScrollSnapSlider(element);

slider.addEventListener('slide-start', function (event) {
    console.info(`Started sliding towards slide ${event.detail}.`);
});
slider.addEventListener('slide-pass', function (event) {
    console.info(`Passing slide ${event.detail}.`);
});
slider.addEventListener('slide-stop', function (event) {
    console.info(`Stopped sliding at slide ${event.detail}.`);
});

API

The library exposes several methods for enhanced functionality:

Method               Description
-------------------------------------------------------------
slideTo(index: Number): void   Scrolls to slide at index.
addEventListener(...)          Shortcut for adding event listeners.
removeEventListener(...)       Shortcut for removing event listeners.
attachEventListeners()         Enables the plugin's JS behavior.
detachEventListeners()         Disables the plugin's JS behavior.
destroy()                      Frees resources and listeners.

Events

Events dispatched on the slider’s element include:

Event Name      Event Detail Type   Description
---------------------------------------------------------------------
slide-start      Number               Dispatched when sliding starts.
slide-pass       Number               Dispatched when sliding passes a slide.
slide-stop       Number               Dispatched when sliding stops at an index.

Public Properties

The public properties of the slider include:

Property                                   Description
-----------------------------------------------------------------------------------------------------------------
slide: Number (read only)                       Currently active slide.
element: Element (read only)                    The element passed into the constructor.
scrollTimeout: Number                           Timeout duration in ms for scroll event detection.
plugins: Map          Map of enabled plugins for the slider.

Support

For additional support regarding CSS scroll snap, you can check out the support tables.

Troubleshooting

If you face any issues with your Scroll Snap Slider setup, here are some common troubleshooting tips:

• Ensure that your markup is correct, especially the class names.
• Check if the CSS styles are properly loaded.
• Verify that JavaScript is correctly linked and there are no errors in the console.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.