Google Style Overflow Scrolling Carousel - g-scrolling-carousel

File Size: 4.5 KB
Views Total: 11372
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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:

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="">Item #1</a>
    <a href="">Item #2</a>
    <a href="">Item #3</a>
    <a href="">Item #4</a>
    <a href="">Item #5</a>

3. Initialize the carousel by calling the function on the items. That's it.

  $(".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,



  • 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.