Google Style Overflow Scrolling Carousel - g-scrolling-carousel

File Size: 4.72 KB
Views Total: 9249
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 both 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="jquery.gScrollingCarousel.css" rel="stylesheet"/>
<script src="" 
<script src="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();

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