This time I will share jQuery Plugin and tutorial about Google Style Overflow Scrolling Carousel – g-scrolling-carousel, hope it will help you in programming stack.
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.
How to use it:
1. Link to jQuery library and the g-scrolling-carousel plugin’s files.
3 |
integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" |
4 |
crossorigin = "anonymous" > |
6 |
< script src = "jquery.gScrollingCarousel.js" ></ script > |
2. Add items to the scrolling carousel.
01 |
< div class = "g-scrolling-carousel" > |
3. Initialize the carousel by calling the function on the items. That’s it.
2 |
$( ".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.