Google Style Overflow Scrolling Carousel - g-scrolling-carousel

g-scrolling-carousel is a jQuery plugin that displays a large group of items in a horizontal scrolling carousel/swiper just like Google's rich results.

Works both on desktop and mobile.

Features:

• Automatically shows navigation arrows.
• Automatically hides the arrows on mobile devices.
• Supports mouse wheel, mouse drag and touch swipe events.
• Automatic left alignment.

See also:

• Spotify Style Mobile-friendly Horizontal Scroller In jQuery

How to use it:

1. Link to jQuery library and the g-scrolling-carousel plugin's 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 items to the scrolling carousel.

<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 carousel by calling the function on the items. That's it.

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

4. Override the default parameters to customize the carousel.

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

Changelog:

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.