Fully Responsive Image Slider Plugin With jQuery | TikslusCarousel

Tikslus carousel is a full jquery based responsive that can be used without providing width and height for images. Support for custom animations via CSS3 classes Can be used with the Jquery Mobile plugin.

Features

  • Pause/resume support.
  • Switch to full-screen view.
  • Provide navigation icons.
  • Thumbnail-based navigation.
  • Zoom in Zoom out effect.
  • Displays the number of slides currently playing.

How to make use of it:

1. Include the jQuery library, javascript file, and CSS file of the jQuery Tikslus Carousel plugin in your HTML page.

<script src="//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 animate.css to provide more cool CSS3 animations.

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

3. Create HTML to display the image. Use the caption attribute to add captions to an image.

<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. Configure the circle of images using the 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>

Fully Responsive Image Carousel, TikslusCarousel Plugin/Github

Read More – 

Easy Responsive Ideal Image Slider Carousel in vanilla JS
Multiple Image Slider With Thumbnail in vanilla JS | tinyslide


See Demo And Download

Official Website(pushpendraas400): Click Here

This superior jQuery/javascript plugin is developed by pushpendraas400. For extra advanced usage, please go to the official website.

Share