Nice and Tiny jQuery Content Slider Plugin - Krakatoa

Krakatoa is a lightweight and easy-to-use jQuery plugin used to create a nice and customizable content slider which supports any html elements, not only images.

Features:

• Arrows control and dots pagination.
• Custom height and weight of your slider.
• Loop and autoplay on load supported.
• Custom direction, delay and duration of the movement.
• Set the options via data-settings attribute or javascript.
• Cross browser.

Basic Usage:

1. Markup html structure.

<div class="krakatoa">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
</div>

2. Load the jQuery javascript library and jQuery Krakatoa plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.krakatoa.js"></script>

3. Initialize the slider with options.

<script>
$(window).on('load',function(){
$('.krakatoa').krakatoa( { 
width: '500px', 
height: 'auto' 
});
});
</script>

4. All the default options.

<script>
$(window).on('load',function(){
$('.krakatoa').krakatoa( { 
width: '400px', // Works with px and %. 
height: '300px', // Works with px and %. 
display: 'block', // Display mode of the slider, the same as the CSS property. String. Default value is 'block'.
arrows: true, // arrows control.
buttons: true, // dots pagination.
items: 1, // Numbers of items to show at the same time.
first: 0, //  Default item to show.
gutter: 10, // Margin between items.
loop: false, // 
autoplay: false,
direction: 'right', // Movement of the slider.
delay: 2000, // Delay of the next movement
duration: 500 // Duration of the movement
});
});
</script>

Change log:

2014-04-08

• Clear current animation when the reload method is called.

2014-02-11

• Add callback function.

2013-12-13

• New implementation based on jQuery Boilerplate.
• Fix animation bug.

---

This awesome jQuery plugin is developed by davidlpz. For more Advanced Usages, please check the demo page or visit the official website.