Fully Responsive Image Carousel Plugin with jQuery and CSS3 - Tikslus Carousel

Tikslus Carousel is a fully responsive and mobile-friendly jQuery plugin for creating an image carousel with amazing CSS3 animations.

Features:

• Lightweight and easy to implement.
• Auto size images to fit the parent container.
• Autoplay at a certain interval.
• Dots and arrows navigation.
• 2 pre-defined animations: slide or rotate.
• Custom CSS3 animation types based on animate.css.
• Supports ajax content with an image preloader.
• Custom image captions.

How to use it:

1. Include jQuery library and the jQuery Tikslus Carousel plugin's javascript and CSS files in the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="js/tiksluscarousel.js"></script>
<link rel="stylesheet" href="css/tiksluscarousel.css" />

2. Include the animate.css to provide more awesome CSS3 animations.

<link rel="stylesheet" href="css/animate.css" />

3. Create the Html for an image carousel. Use caption attribute to add the image captions.

<div id="demo">
<ul>
<li><img src="images/disney1.jpg" caption="The Walt Disney Cartoon Picture Birds With Flying Elephant and enjoy the flying" /></li>
<li><img src="images/disney2.jpg" caption="The Walt Disney Cartoon Elephant Landing in the village." /></li>
<li><img src="images/disney3.jpg" caption="The Walt Disney Cartoon Elephant and Mouse Playing with bubbles."  /></li>
...
</div>

4. Initialize the image carousel with default settings.

<script language="javascript">
$(document).ready(function(){
$("#demo").tiksluscarousel();
});

5. Options and defaults.

<script language="javascript">
$(document).ready(function(){
$("#demo").tiksluscarousel({
current: 1,
prev: "&laquo;",  
next: "&raquo;",

// can rotate,slide and zoom (zoom is new in version 2.0)
type: 'slide', 

autoplayInterval: 10000,
animationInterval: 800,

//always in percentage a whole number 2% by default
dotRatio: 0.02, 

loader:'ajax-loader.gif',
customAnimationClassIn: '',
customAnimationClassOut: '',
customAnimationCaption: '',
captionAnimationInterval: 100,

//always in percentage a whole number 15% by default
captionFontRatio:0.15,

width:0,
height:0,

//can be dots or thumbnails (thumbnails new in version 2.0)
nav:'dots', 

// new in version 2.0
navIcons:true, 
ProgressBar:true, 
autoPlay:true
});
});
</script>

Change logs:

2015-02-25

• added 2 more options to control progressbar and auto sliding

2015-01-08

• Fixed bug for preview nav icon images

v2.0.0 (2014-06-03)

• changed width to Pause/resume support.
• Switch to full screen view.
• Introducing Navigation Icons.
• Thumbnails based navigation.
• Zoom-in Zoom-out Effect.
• Displays Number of current Slide playing.

---

This awesome jQuery plugin is developed by pushpendra10. For more Advanced Usages, please check the demo page or visit the official website.