Shortcode - Carousel

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>