Google like scrolling using jQuery for multiple images

In this tutorial, you will learn how to use Google like scrolling using jQuery for multiple images. Sometimes we need to scroll the gallery images horizontally one after another. We can do so with the help of HTML and CSS or by using various jQuery plugins available online. But here, I will discuss a g-scrolling carousel plugin that is very easy to integrate.

Also read, Javascript String Methods with example

Required steps for Google like scrolling using jQuery

Step 1:- First of all, you have to download the plugin from here.

Step 2:- Create an HTML file and include some images inside the below divs as shown below.

<div class="container"> 
<h1>Google Like Scrolling using jQuery for Multiple Images</h1> 
<div class="g-scrolling-carousel"> 
<div class="items"> 
<img src="nature1.jpg" width="300" height="200"> 
<img src="nature2.jpg" width="300" height="200"> 
<img src="nature3.jpg" width="300" height="200"> 
<img src="nature4.jpg" width="300" height="200"> 
</div> 
</div> 
</div>

Step 3:- Extract the plugin zip folder and place the extracted folder along with the HTML file.

Step 4:- Include the CSS link in your HTML file as shown below