Tikslus Carousel [ Click here to view DEMO ]

Tikslus Carousel was created to be responsive.It Can be view full page or you can provide a specific Width and Height for the plugin.


Getting started with Tikslus Carousel is easy and staright forward

Download and Unzip:

  • Unzip the contents of the Zipped file you have downloaded from codecanyon.net.
  • place tiksluscarousel.css and animate.css files in the directory where you have kept your other css files. (for example: in CSS folder)
  • Place tiksluscarousel.min.js and jquery.min.js in your JS library.

Installation:

Installing Tikslus Carousel is very easy and straight-forward. Simply add the following link and scripts tags with your proper paths and paste the following code within the Head tags of your HTML document.





		
		

How to use plugin ?

Using Tiksluscarousel is easy.After including carousel css and js files. Inside a DIV element create an unordered list of images you want to use in carousel.

HTML markup

		
		

Make sure you have the same (width and height) for all images

Activate using Jquery selector

Using Jquery selectory inside $(document).ready() or $(window).load() to activate carousel.

		
		
		
		
ParameterDefault valueAllowed ValueDescription
current1Any number (>0) not greater than total images in the carouselYou can specify from which item the carousel should start
prev"«"
laquo
HTML code to specify Previous buttonDefines Previous button on the carousel
next"»"
raquo
HTML code to specify Next buttonDefines Next button on the carousel
typeslideslide,rotate or custom
  • It allows images to slide from right to left horizontally in the carousel

  • fades out one image at a time in the carousel

  • This option allows you to specify CSS3 transistion effects for animating images. We have provided animate.css with this package. You can create your own CSS3 transition classes and use them

autoplayInterval7000 (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.

animationInterval800value in millisecondsdefines sliding speed of your carousel. Higher the value slower is the sliding effect.
dotRatio0.02Always in percentage. 2% by defaultdefines the width and height of dots. It is specified as percentage values to make it reponsive.
loaderajax-loader.gifajax loader gif image (can be specified with full path) Ajax loader gif image to be shown during image pre loading.
customAnimationClassInnullCSS3 class nameSpecifies 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'
		
		
customAnimationClassOutnullCSS3 class nameSpecifies 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'
		
		
customAnimationCaptionnullCSS3 class nameIf this option is set as NULL. Captions will slide in.
captionAnimationInterval100value in millisecondsSpeed of caption animation
captionFontRatio0.15value between 0.1 to 1font size of text used in captions.
width0width 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
height0Height 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