Google Style Overflow Scrolling Carousel

g-scrolling-carousel is a jQuery plugin that displays a large group of items in a horizontal scrolling carousel/swiper

특히, 내부 컨텐츠 개수를 알 수 없을 경우 유용하게 사용할 수 있다.

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:

Load the jQuery, G Scrolling Carousel ‘s CSS and JavaScript file into HTML document to create Google like scrolling carousel.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- G Scrolling Carousel CSS -->
<link href="css/jquery.gScrollingCarousel.css" rel="stylesheet">

<!-- G Scrolling Carousel Js -->
<script src="js/jquery.gScrollingCarousel.js"></script> 

After including all assets, create markup structure for carousel like below:

<div class="g-scrolling-carousel">
  <div class="items">
        <img src="https://source.unsplash.com/600x300/?prayer">
	<img src="https://source.unsplash.com/600x300/?walking">
	<img src="https://source.unsplash.com/600x300/?rose">
	<img src="https://source.unsplash.com/600x300/?man">	
 </div>
</div>

Style your carousel’s items with CSS.

.g-scrolling-carousel .items{
   padding: 5px 0;
			
}
.g-scrolling-carousel .items img{
   display: inline-block;
   margin-right: 10px;
   width: 170px;
   height: 150px;
   line-height: 150px;
   box-shadow: 0 0 5px #000;
   text-align: center;
}

Finally, initialize the plugin in jQuery document ready function.

$(document).ready(function(){

    $(".g-scrolling-carousel .items").gScrollingCarousel();

});