Full height carousel with jQuery

Recently for one of my projects I have created a simple carousel slider. With just 100 rows of code the script is quite simple and flexible.
It has its own API and custom events.


Getting Started:

The "FHCarousel" depends on jQuery, so you have to require the library before the actual script.

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

The just add the CSS and the JS File and you are ready to go.

<link rel="stylesheet" type="text/css" href="FHCarousel.css">

<script src="FHCarousel.js"></script>

Default usage:

$("#some-element").FHCarousel();

Available options:

$("#some-element").FHCarousel({
  "nextPrev":true,
  "navigation":"dots"
});

nextPrev: Boolean - Show or hide the Next/Previous arrows - Default: true
navigation: Boolean or String - Show/Hide navigation and navigation type - Default: false - Available options - false, 'dots', 'thumbnails'

API usage:


var myElement = documewnt.getElementById('some-id');

var myCarousel = FHCarousel.init(myElement, options);

/* Methods: */

    myCarousel.next();
    myCarousel.prev();
    myCarousel.goto(index);

next(): goes to next slide
prev(): goes to previous slide goto(index): goes to specific slide -
the 'index' parameter specifies the index of the slide
Example: myCarousel.goto(2).

Custom events usage:


$(myCarousel).on('carousel.prev', function(event, activeSlide, previousActiveSlide){
  //some callback
});

Available Events:

carousel.prev - triggers when prev() function is executed
carousel.next - triggers when next() function is executed
carousel.goto - triggers when goto() function is executed
carousel.change - triggers when one of the above functions is executed

3 parameters are passed through the callback:

event - jQuery event object
activeSlide - current active slide element
previousActiveSlide - previous active slide element