# Events

After initialization, jCarousel triggers the following events on the root and the items elements of the carousel:

- Root element events
  - create
  - createend
  - reload
  - reloadend
  - destroy
  - destroyend
  - scroll
  - scrollend
  - animate
  - animateend
- Item element events
  - targetin
  - targetout
  - firstin
  - firstout
  - lastin
  - lastout
  - visiblein
  - visibleout
  - fullyvisiblein
  - fullyvisibleout

Note: Some events are triggered from the constructor, so you have to bind to the events before you initialize the plugin:

    $('.jcarousel')

        // Bind first
        .on('jcarousel:create', function(event, carousel) {
            // Do something
        })

        // Initialize at last step
        .jcarousel();

# Root element events

These events are triggered on the root element.

## create

Triggered on creation of the carousel.

### Example

    $('.jcarousel').on('jcarousel:create', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## createend

Triggered after creation of the carousel.

### Example

    $('.jcarousel').on('jcarousel:createend', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## reload

Triggered when the `reload` method is called.

### Example

    $('.jcarousel').on('jcarousel:reload', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## reloadend

Triggered after the `reload` method is called.

### Example

    $('.jcarousel').on('jcarousel:reloadend', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## destroy

Triggered when the `destroy` method is called.

### Example

    $('.jcarousel').on('jcarousel:destroy', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## destroyend

Triggered after the `destroy` method is called.

### Example

    $('.jcarousel').on('jcarousel:destroyend', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## scroll

Triggered when the `scroll` method is called.

### Example

    $('.jcarousel').on('jcarousel:scroll', function(event, carousel, target, animate) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
        // "target" is the target argument passed to the `scroll` method
        // "animate" is the animate argument passed to the `scroll` method
        //      indicating whether jCarousel was requested to do an animation
    });

## scrollend

Triggered after the `scroll` method is called.

Note: This method is triggered at the end of the scroll method and not when the animation is finished.

### Example

    $('.jcarousel').on('jcarousel:scrollend', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## animate

Triggered when the carousel starts a animation.

### Example

    $('.jcarousel').on('jcarousel:animate', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

## animateend

Triggered after the carousel has finished a animation.

### Example

    $('.jcarousel').on('jcarousel:animateend', function(event, carousel) {
        // "this" refers to the root element
        // "carousel" is the jCarousel instance
    });

# Item element events

These events are triggered on the item elements. The recommended way is to bind via delegated events:

    $('.jcarousel').on('jcarousel:targetin', 'li', function() {
        $(this).addClass('active');
    });

## targetin

Triggered when the item becomes the targeted item.

### Example

    $('.jcarousel').on('jcarousel:targetin', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## targetout

Triggered when the item is no longer the targeted item.

### Example

    $('.jcarousel').on('jcarousel:targetout', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## firstin

Triggered when the item becomes the first visible item.

### Example

    $('.jcarousel').on('jcarousel:firstin', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## firstout

Triggered when the item is no longer the first visible item.

### Example

    $('.jcarousel').on('jcarousel:firstout', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## lastin

Triggered when the item becomes the last visible item.

### Example

    $('.jcarousel').on('jcarousel:lastin', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## lastout

Triggered when the item is no longer the last visible item.

### Example

    $('.jcarousel').on('jcarousel:lastout', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## visiblein

Triggered when the item becomes a visible item.

### Example

    $('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## visibleout

Triggered when the item is no longer a visible item.

### Example

    $('.jcarousel').on('jcarousel:visibleout', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## fullyvisiblein

Triggered when the item becomes a fully visible item.

### Example

    $('.jcarousel').on('jcarousel:fullyvisiblein', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });

## fullyvisibleout

Triggered when the item is no longer a fully visible item.

### Example

    $('.jcarousel').on('jcarousel:fullyvisibleout', 'li', function(event, carousel) {
        // "this" refers to the item element
        // "carousel" is the jCarousel instance
    });