Fully Responsive Image Carousel Plugin with jQuery and CSS3 - Tikslus Carousel
File Size: | 1.94 MB |
---|---|
Views Total: | 11691 |
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: "«", next: "»", // 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.