Google Style Overflow Scrolling Carousel - g-scrolling-carousel
File Size: | 4.5 KB |
---|---|
Views Total: | 9644 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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