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

Fully Responsive Image Carousel Plugin with jQuery and CSS3 - Tikslus Carousel
File Size: 1.94 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.