Fast, Extensible, Touch-enabled Carousel & Slider JS Library – Smooothy

Smooothy is a lightweight, framework-agnostic JavaScript slider library for creating smooth, performant, interactive, touch-enabled carousels.

It can help you handle the tricky parts of slider mechanics, like smooth scrolling, infinite looping, snapping, and touch interactions, while staying out of your way on styling and advanced features.

Features:

• High Performance: It’s built on requestAnimationFrame loop for updates.
• Extensibility: You can easily add your own methods and UI.
• Infinite Scrolling: Seamless infinite looping.
• Snapping: Optional snapping to slide positions.
• Touch & Mouse Interactions: Handles drag, swipes (with horizontal/vertical detection), and momentum.
• Parallax Ready: Provides parallaxValues in its update callback for creating depth effects.
• Responsive: Automatically recalculates dimensions on resize.
• Customizable Animation: Fine-tune animation with options like lerpFactor, speedDecay, and snapStrength.
• WebGL Friendly: Better synchronization with WebGL rendering.
• Event Callbacks: onSlideChange, onResize, onUpdate for hooking into the slider’s lifecycle.

See It In Action:

How To Use It:

1. Install Smooothy and import it into your project.

# NPM
$ npm install smooothy

// Core class only
import Core from "smooothy";

// Core with utilities like damp (useful for custom animations)
import Core, { damp } from "smooothy";

2. Create a slider wrapper and direct children as slides.

<div class="slider-wrapper" data-slider>
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  ... more slides here ...
</div>

3. The basic styling for the slider. If you want the content of the slide to not touch the edges due to this padding, you’d put another div inside your slide element and style that as the visual slide.

[data-slider] {
  display: flex;
  overflow: hidden;
}

[data-slider] > * {
  flex-shrink: 0;
  width: 100%; /* Or your specific slide width, e.g., 300px */
  /* For gaps:
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  box-sizing: border-box;
  */
}

4. Initialize the slider and run its update method in an animation loop.

// Select your wrapper element
const sliderWrapper = document.querySelector("[data-slider]");

// Create a new slider instance
const slider = new Core(sliderWrapper, {
  // options here
});

// Update the slider (typically in an animation loop)
function animate() {
  slider.update();
  requestAnimationFrame(animate);
}
animate();

// Don't forget to clean up when the slider is no longer needed
// slider.destroy();

5. Available options to customize the behavior of your slider.

• infinite (boolean, default: true): Enables infinite looping.
• snap (boolean, default: true): Enables snapping to slide positions.
• dragSensitivity (number, default: 0.005): Multiplier for drag sensitivity.
• lerpFactor (number, default: 0.3): Controls animation smoothness (lower is smoother). I’ve found tweaking this is key for matching the feel of other site animations.
• scrollSensitivity (number, default: 1): Multiplier for scroll wheel sensitivity.
• snapStrength (number, default: 0.1): How strongly the slider snaps.
• speedDecay (number, default: 0.85): How quickly sliding speed decays.
• bounceLimit (number, default: 1): Max overscroll when infinite is false.
• scrollInput (boolean, default: false): Enables mouse wheel/trackpad scrolling. Requires virtualScroll under the hood.
• setOffset (function): Custom function ({itemWidth, wrapperWidth}) => itemWidth to define slide end offset. Useful for non-standard alignments.
• virtualScroll (object): Config for virtual-scroll behavior (e.g., mouseMultiplier, touchMultiplier).
• onSlideChange (function): Callback (currentSlide, previousSlide) => {} when active slide changes.
• onResize (function): Callback (instance) => {} when slider is resized.
• onUpdate (function): Callback (instance) => {} on each update frame. This is where you can hook in custom animations using instance.speed, instance.deltaTime, etc.

const slider = new Core(sliderWrapper, {
  infinite: true,
  snap: true,
  dragSensitivity: 0.005,
  lerpFactor: 0.3,
  scrollSensitivity: 1,
  snapStrength: 0.1,
  speedDecay: 0.85,
  bounceLimit: 1,
  virtualScroll: {
    mouseMultiplier: 0.5,
    touchMultiplier: 2,
    firefoxMultiplier: 30,
    useKeyboard: false,
    passive: true,
  },
  setOffset: ({ itemWidth, wrapperWidth }) => itemWidth,
  scrollInput: false,
  onSlideChange: (currentSlide, previousSlide) => {},
  onResize: (instance) => {},
  onUpdate: (instance) => {},
});

6. Control over the slider programmatically with the following API methods.

• Navigation: slider.goToNext(), slider.goToPrev(), slider.goToIndex(n)
• State Control: slider.init(), slider.kill() (disables), slider.destroy() (full cleanup), slider.paused = true/false, slider.snap = true/false
• State Queries/Setters:
  • slider.currentSlide: Get current slide index.
  • slider.progress: Get slider progress (0-1).
  • slider.target: Get/Set target position (setting it lerps).
  • slider.current: Get/Set current position (setting it moves instantly). For an instant jump, set both: slider.current = slider.target = 5.
  • slider.deltaTime: Time since last update (seconds). Crucial for frame-rate independent animations in onUpdate.
  • slider.viewport: Object with itemWidth, wrapperWidth, totalWidth.
  • slider.isVisible: Boolean if the slider is in view.

The post Fast, Extensible, Touch-enabled Carousel & Slider JS Library – Smooothy appeared first on CSS Script.