Infinite Scrolling Carousel with Momentum Physics – Grab-n-Drag Infinite Carousel

This is a lightweight, performant JavaScript library that creates smooth infinite scrolling carousels with seamless looping, grab-and-drag interaction, and momentum scrolling.

Features:

• Infinite Loop Scrolling: The library duplicates items behind the scenes. This creates continuous scrolling with no visible jumps or resets.
• Grab-and-Drag Interaction: Users can click and drag with their mouse or swipe on touch devices.
• Momentum Physics: After the user releases their drag, the carousel continues moving. The momentum decays gradually based on velocity.
• Pause on Hover: Auto-scrolling stops when the user hovers over the carousel.
• Event Callbacks: Hook into lifecycle events like drag start, momentum start, and position reset.

Use Cases:

• Logo Showcases: Display client logos or partner brands in a continuous horizontal scroll.
• Skill Displays: Show technical skills, certifications, or technology stack icons.
• Testimonial Sliders: Present customer testimonials or reviews in an auto-scrolling carousel.
• Product Galleries: Create horizontal product galleries that users can drag through.

How To Use It:

1. Install & download.

# NPM
$ npm install grab-n-drag-infinite-carousel

2. Import grab-n-drag-infinite-carousel into your project.

// ES Module
import InfiniteScrollCarousel from 'grab-n-drag-infinite-carousel/dist/grab-n-drag-infinite-carousel.min.js';
import 'grab-n-drag-infinite-carousel/dist/grab-n-drag-infinite-carousel.min.css';

// CommonJS
const InfiniteScrollCarousel = require('grab-n-drag-infinite-carousel/dist/grab-n-drag-infinite-carousel.min.js');
require('grab-n-drag-infinite-carousel/dist/grab-n-drag-infinite-carousel.min.css');

// Browser
<link rel="stylesheet" href="/dist/grab-n-drag-infinite-carousel.min.css">
<script src="/dist/grab-n-drag-infinite-carousel.min.js"></script>

3. Add your carousel items to the carousel container.

<div class="infinite-scroll-wrapper">
  <!-- Container holds all carousel items -->
  <div class="infinite-scroll-container" id="myCarousel">
    <div class="infinite-scroll-item">Item 1</div>
    <div class="infinite-scroll-item">Item 2</div>
    <div class="infinite-scroll-item">Item 3</div>
    <div class="infinite-scroll-item">Item 4</div>
    <div class="infinite-scroll-item">Item 5</div>
    ...
  </div>
</div>

4. Initialize the carousel with configuration:

const container = document.querySelector('#myCarousel');
const carousel = new InfiniteScrollCarousel(container, {
  // options here
});

5. All configuration options:

• speed (number): Auto-scroll speed in pixels per second. Default is 50. Set to 0 to turn off auto-scrolling.
• reverseDirection (boolean): Scroll direction control. False scrolls right to left. True scrolls left to right. Default is false.
• fadeColor (string): Color of the edge fade effect. Accepts hex, rgb, or rgba values. Use ‘transparent’ to hide the fade. Default is ‘#ffffff’.
• fadeWidth (number): Width of the edge fade in pixels. Default is 50.
• momentumDecay (number): How quickly drag momentum fades after release. Range is 0.01 to 0.5. Higher values stop the carousel sooner. Default is 0.05.
• maxMomentumSpeed (number): Maximum momentum speed after drag release. Measured in pixels per millisecond. Range is 0.5 to 25. Default is 2.0.
• disableMomentum (boolean): Turns off momentum scrolling. When true, the carousel stops immediately after drag release. Auto-scroll resumes right away. Default is false.
• pauseOnHover (boolean): Pauses auto-scroll when the pointer hovers over the carousel. Default is true.
• interactable (boolean): Controls whether users can drag the carousel. Set to false to disable drag interaction. Default is true.
• copies (number): Number of full item sets cloned for the infinite loop. Range is 3 to 100. Increase this if you see gaps at the end of your carousel. Default is 3.

const carousel = new InfiniteScrollCarousel(container, {
  speed: 50,
  reverseDirection: false,
  pauseOnHover: true,
  momentumDecay: 0.05,
  maxMomentumSpeed: 2.0,
  fadeColor: '#ffffff',
  fadeWidth: 50,
  interactable: true,
  copies: 3,
  disableMomentum: false
});

6. API methods.

// Pause automatic scrolling
carousel.pause();

// Resume paused scrolling
carousel.resume();

// Set scroll speed (pixels per second)
carousel.setSpeed(75);

// Change scroll direction (true = left to right, false = right to left)
carousel.setReverseDirection(true);

// Update edge fade color
carousel.setFadeColor('#1a1a2e');

// Update fade width in pixels
carousel.setFadeWidth(80);

// Clean up event listeners and reset carousel
// Call this when removing the carousel from the page
carousel.destroy();

7. Event handlers.

// Fires when carousel initialization completes
const carousel = new InfiniteScrollCarousel('#myCarousel', {
  onReady: () => {
      console.log('Carousel is ready');
  }
});

// Fires when user starts dragging
carousel.onDragStart = () => {
  console.log('Drag started');
};

// Fires during drag movement (throttled for performance)
// Receives current position and delta X change
carousel.onDrag = (position, deltaX) => {
  console.log('Dragging at position:', position);
};

// Fires when user ends dragging
carousel.onDragEnd = () => {
  console.log('Drag ended');
};

// Fires when momentum scrolling begins
// Receives velocity value
carousel.onMomentumStart = (velocity) => {
  console.log('Momentum started with velocity:', velocity);
};

// Fires when momentum scrolling ends
carousel.onMomentumEnd = () => {
  console.log('Momentum ended');
};

// Fires when position resets during the infinite loop
carousel.onPositionReset = () => {
  console.log('Position reset for loop');
};

// Fires when carousel is paused
carousel.onPause = () => {
  console.log('Carousel paused');
};

// Fires when carousel is resumed
carousel.onResume = () => {
  console.log('Carousel resumed');
};

Alternatives:

• Swiper: A powerful and modular JavaScript library to implement responsive, accessible, flexible, touch-enabled carousels/sliders on your mobile websites and apps.
• Slick Carousel: A feature-rich jQuery slider plugin for creating highly customizable, fully responsive, and mobile friendly carousels/sliders that work with any html elements.
• Flickity: A commercial carousel library with physics-based drag interaction.

FAQs:

Q: Why aren’t my carousel items scrolling?
A: Check that the CSS file loads properly. Verify that your container has direct children with the infinite-scroll-item class. The wrapper must have overflow hidden for the fade effect to work.

Q: How do I make items maintain spacing between them?
A: Add margin to your items using CSS. For example: .infinite-scroll-item { margin-right: 30px; }. The library calculates the total width including margins. This spacing will be maintained throughout the carousel.

Q: I see a gap at the end of my carousel. How do I fix this?
A: The carousel runs out of duplicated copies to fill the infinite loop. Increase the copies option from the default value of 3 to a higher number like 5 or 6. This creates more duplicates to cover the visible area.

Q: How do I disable auto-scrolling but keep drag functionality?
A: Set the speed option to 0 when initializing the carousel. This turns off auto-scroll completely. Users can still drag the carousel and experience momentum physics. The infinite loop still works normally.

The post Infinite Scrolling Carousel with Momentum Physics – Grab-n-Drag Infinite Carousel appeared first on CSS Script.