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 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="https://code.jquery.com/jquery-3.4.1.js" 
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
        crossorigin="anonymous">
</script>
<script src="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();
});

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