JS Tutorial
- Overview
- Documents
- Fully Responsive
- Can be used without providing width and height of the images
- Support custom animation Via CSS3 classes
- Can be used with Jquery Mobile plugin
Source: tikslus.com
1. INCLUDE CSS AND JS FILES
<link href="/css/tiksluscarousel.min.css" rel="stylesheet"> <script src="/js/jquery.min.js"></script> <script src="/js/tiksluscarousel.min.js"></script>
2. HTML
<div id="carousel1"> <ul> <li><img src="images/img1.jpg"></li> <li><img src="images/img2.jpg"></li> <li><img src="images/img3.jpg"></li> <li><img src="images/img4.jpg"></li> <li><img src="images/img5.jpg"></li> </ul> </div>
3. JAVASCRIPT
$(document).ready(function(){
$("#carousel1").tiksluscarousel(); //called with all default values
});
4. OPTIONS
| Parameter | Default value | Allowed Value | Description |
|---|---|---|---|
| current | 1 | Any number (>0) not greater than total images in the carousel | You can specify from which item the carousel should start |
| prev |
"«"
laquo |
HTML code to specify Previous button | Defines Previous button on the carousel |
| next |
"»"
raquo |
HTML code to specify Next button | Defines Next button on the carousel |
| type | slide | slide,rotate, custom or zoom |
|
| nav | dots | dots or thumbnails | Defines how carousel is controlled. Value set as 'thumbnails' will allow thumbnails based navigation and value of 'dots' will allow dots based navigation |
| navIcons | true | true or false |
Introduced in version 2.0.0 .If set to true 'Previous' and 'next' navigation buttons will be replaced with next and previous image thumbnails |
| autoplayInterval | 7000 (7 seconds) | value in milliseconds |
Carousel can auto-scroll. This is enabled by specifying a millisecond value to this option. The value you specify is the amount of time between 2 consecutive slides. |
| animationInterval | 800 | value in milliseconds | defines sliding speed of your carousel. Higher the value slower is the sliding effect. |
| dotRatio | 0.02 | Always in percentage. 2% by default | defines the width and height of dots. It is specified as percentage values to make it reponsive. |
| loader | ajax-loader.gif | ajax loader gif image (can be specified with full path) | Ajax loader gif image to be shown during image pre loading. |
| customAnimationClassIn | null | CSS3 class name |
Specifies the name of CSS3 class which defines the entrace effect. To use this option you must set type parameter to custom. example:
type:'custom', customAnimationClassIn:'bounceIn' |
| customAnimationClassOut | null | CSS3 class name |
Specifies the name of CSS3 class which defines the exit effect. To use this option you must set type parameter to custom. example:
type:'custom', customAnimationClassOut:'bounceOut' |
| customAnimationCaption | null | CSS3 class name | If this option is set as NULL. Captions will slide in. |
| captionAnimationInterval | 100 | value in milliseconds | Speed of caption animation |
| captionFontRatio | 0.15 | value between 0.1 to 1 | font size of text used in captions. |
| width | 0 | width of image. (without specifying any unit) | Defines the width of the images used in carousel. If set to 0 carousel will take Parent wrappers width or body tag width |
| height | 0 | Height of image. (without specifying any unit) | Defines the Height of the images used in carousel. If set to 0 carousel will take Parent wrappers Height or body tag Height |
