Home » Featured » jQuery Carousel Slider Plugin with CSS3 Transitions

jQuery Carousel Slider Plugin with CSS3 Transitions

A really simple and lightweight jQuery carousel plugin that provides the basic functionalities of a carousel slider like infinite loop scroll, arrows navigation, CSS3 based slide transitions, and more.



How to use it

Include the required jquery.carousel.css file in the header.

<br /><%%KEEPWHITESPACE%%>	&lt;link href="stylesheets/jquery.carousel.css" rel="stylesheet" type="text/css" /&gt;<br /><br />

Include the latest version of jQuery javascript library and jquery.carousel.js script in the footer.

<br />&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="javascripts/jquery.carousel.js"&gt;&lt;/script&gt;<br />

Create the html for an image carousel.

&lt;/pre&gt;<br />&lt;section class="demo"&gt;<br />&lt;div class="carousel"&gt;<br />&lt;div class="previews"&gt;<br />&lt;div class="preview"&gt;&lt;img alt="" src="1.jpg" /&gt;&lt;/div&gt;<br />&lt;div class="preview"&gt;&lt;img alt="" src="2.jpg" /&gt;&lt;/div&gt;<br />&lt;div class="preview"&gt;&lt;img alt="" src="3.jpg" /&gt;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;div class="controls"&gt;&lt;a class="next" href="#" data-action="next"&gt;›&lt;/a&gt; &lt;a class="prev" href="#" data-action="prev"&gt;‹&lt;/a&gt;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/section&gt;<br />&lt;pre&gt;<br />

That’s it. No JS call required.

Demo Download
Tags :

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *


If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top