Carousel is a nice way to show many images in a horizontal slider.
Live Demo
Please check live demo:
http://demo.drupar.com/paripro/carousel
How to create carousel
Carousel is a nice way to show many images in a horizontal slider.
Creating carousel is very easy. Suppose we want to create a carousel of three images. Use below sample code for this:
<ul id="carousel">
<li>Image One</li>
<li>Image two</li>
<li>Image three</li>
</ul>Image one, Image two and Image three should be placed in html img tag as shown below:
<ul id="carousel">
<li><img src="http://domain.com/images/1.jpg"></li>
<li><img src="http://domain.com/images/2.jpg"></li>
<li><img src="http://domain.com/images/3.jpg"></li>
</ul>How to create multiple carousel on same page
You can create unlimited carousel on your website. However, you can create maximum 3 carousel on one page.
Use below sample code for first carousel
<ul id="carousel">
<li><img src="http://domain.com/images/1.jpg"></li>
<li><img src="http://domain.com/images/2.jpg"></li>
<li><img src="http://domain.com/images/3.jpg"></li>
</ul>Use below sample code for second carousel
<ul id="carousel2">
<li><img src="http://domain.com/images/1.jpg"></li>
<li><img src="http://domain.com/images/2.jpg"></li>
<li><img src="http://domain.com/images/3.jpg"></li>
</ul>Use below sample code for third carousel
<ul id="carousel3">
<li><img src="http://domain.com/images/1.jpg"></li>
<li><img src="http://domain.com/images/2.jpg"></li>
<li><img src="http://domain.com/images/3.jpg"></li>
</ul>If you want to create more than 3 carousel on a single page, please contact us. We will help you with this.
How to link an carousel image to some page
Use below sample code to link an carousel image to some page.
<ul id="carousel">
<li><a href="http://www.domain.com"><img src="http://domain.com/images/1.jpg"></a></li>
</ul>Sample code
<h3>Our Recent Projects</h3>
<div class="line"></div>
<ul id="carousel">
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/1.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/2.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/3.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/4.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/5.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/6.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/7.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/8.jpg" /></a></li>
<li><a href="http://demo.drupar.com/berrypro/portfolio-single-page"><img src="http://images.drupar.com/berrypro/images/portfolio/9.jpg" /></a></li>
</ul>