Nice and Tiny jQuery Content Slider Plugin - Krakatoa

File Size: 14.1 KB
Views Total: 2723
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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" />

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

<script src=""></script>
<script src="jquery.krakatoa.js"></script>

3. Initialize the slider with options.

$('.krakatoa').krakatoa( { 
width: '500px', 
height: 'auto' 

4. All the default options.

$('.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

Change log:


  • Clear current animation when the reload method is called.


  • Add callback function.


  • 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.