Google Style Horizontal Carousel jQuery Plugin - g-scrolling-carousel

g-scrolling-carousel is a jQuery plugin that creates a Google-style horizontal scrolling carousel for item lists, image rows, product links, and rich-result-style navigation.

The plugin turns a flex-based .items container into a horizontal scroller with arrow navigation, mouse wheel scrolling, mouse drag support, and native mobile scrolling.

Features:

• Adds left and right arrow navigation when desktop-style controls are active.
• Hides unavailable arrows at the start and end of the scroll area.
• Scrolls by one item width or by the visible viewport width.
• Handles mouse wheel movement for horizontal item browsing.
• Supports mouse drag with optional snap-to-item behavior.
• Uses native horizontal scrolling on touch devices when the mobile option is active.
• Works with links, images, cards, labels, and other repeated inline items.

Use Cases:

• Create a Google-style carousel for related links, search-style modules, or content recommendations.
• Display a horizontal row of product cards, thumbnails, posts, tags, or category chips.
• Add swipe-friendly navigation to compact mobile item lists.
• Build a simple horizontal gallery when a full slider framework would add unnecessary weight.

Alternatives:

• 10 Best Carousel Plugins In jQuery/JavaScript/CSS
• Draggable & Touch-friendly Carousel In Vanilla JavaScript – embla-carousel
• 10 Best Free AI Tools for Frontend Developers 

How To Use It

1. Link to jQuery and the g-scrolling-carousel CSS and JavaScript files.

<link href="/path/to/jquery.gScrollingCarousel.css" rel="stylesheet"/>
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.gScrollingCarousel.js"></script>

2. Add a carousel wrapper and place the scrollable items inside an .items container.

<div class="g-scrolling-carousel">
<div class="items">
<a href="https://www.jqueryscript.net">Item #1</a>
<a href="https://www.jqueryscript.net">Item #2</a>
<a href="https://www.jqueryscript.net">Item #3</a>
<a href="https://www.jqueryscript.net">Item #4</a>
<a href="https://www.jqueryscript.net">Item #5</a>
...
</div>
</div>

3. Initialize the plugin on the .items element. 

$(function(){
  $(".g-scrolling-carousel .items").gScrollingCarousel();
});

4. Pass options to change the scrolling behavior.

• mouseScrolling (Boolean): Enables mouse wheel scrolling inside the carousel. The default value is true.
• scrollAmount (String): Controls how far arrow clicks move the row. Use 'viewport' to move by the visible group of items. The plugin also supports item-width scrolling when this value is not 'viewport'. The default value is 'viewport'.
• draggable (Boolean): Enables mouse drag interaction on desktop-style navigation. The default value is true.
• snapOnDrag (Boolean): Snaps the row to the nearest item after drag movement. The default value is true.
• mobileNative (Boolean): Uses native horizontal scrolling on touch devices. The default value is true.

$(".g-scrolling-carousel .items").gScrollingCarousel({
  mouseScrolling: true,
  scrollAmount: 'viewport',
  draggable: true,
  snapOnDrag: true,
  mobileNative: true
});

Advanced Examples

Scroll One Item At A Time

Use a non-viewport scroll mode when each arrow click should move the carousel by one item width.

$(".g-scrolling-carousel .items").gScrollingCarousel({
scrollAmount: 'item'
});

Turn Off Mouse Wheel Scrolling

Disable mouse wheel scrolling when the carousel sits inside a page section where vertical page scrolling should keep priority.

$(".g-scrolling-carousel .items").gScrollingCarousel({
mouseScrolling: false
});

Use Desktop Dragging With No Snap

Keep mouse drag active but stop the row from snapping after drag movement.

$(".g-scrolling-carousel .items").gScrollingCarousel({
draggable: true,
snapOnDrag: false
});

FAQ

Q: Which element should I call gScrollingCarousel() on?
A: Call it on the scrollable .items element, not on the outer .g-scrolling-carousel wrapper.

Q: Can the carousel contain images and cards?
A: Yes. The items can be links, images, cards, labels, or other repeated elements. Each direct child inside .items acts as one carousel item.

Q: Why are the arrow buttons hidden on mobile?
A: The default mobileNative option uses native horizontal scrolling on touch devices, so the plugin does not add desktop arrow controls there.

Q: Does the plugin provide next or previous methods?
A: No public next or previous methods are documented. Configure arrow behavior through the available options.

Q: What should I check when the carousel does not scroll?
A: Check that jQuery loads before the plugin, the CSS file is included, the initializer targets .items, and the item row has enough content to overflow horizontally.

Changelog

2026-06-02

• Updated

2023-05-01

• Added new options and improved functionality

---

This awesome jQuery plugin is developed by morgansson. For more Advanced Usages, please check the demo page or visit the official website.