package.docs_src.templates.pages.docs.api-events.hbs Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of owl.carousel Show documentation

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

The newest version!

---
title: Events
subTitle: API
nav: docs
description: Owl Carousel Documentation

sort: 3
tags:
- API
---

{{#markdown }}
## Events

> Events are provided by Owl Carousel in strategic code locations. This gives you the ability to listen for any changes and perform your own actions.

```
var owl = $('.owl-carousel');
owl.owlCarousel();

// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
	...
})

```

You could also trigger events by yourself to control Owl Carousel:

```
var owl = $('.owl-carousel');
owl.owlCarousel();

// Go to the next item
$('.customNextBtn').click(function() {
	owl.trigger('next.owl.carousel');
})

// Go to the previous item
$('.customPrevBtn').click(function() {
	// With optional speed parameter
	// Parameters has to be in square bracket '[]'
	owl.trigger('prev.owl.carousel', [300]);
})

```

### Callbacks

Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.

```
$('.owl-carousel').owlCarousel({
	onDragged: callback
});

function callback(event) {
	...
}
```

### Data

Each event passes very useful information within the [event object](https://api.jquery.com/category/events/event-object/). Based on the example above:

```Javascript
function callback(event) {
	// Provided by the core
	var element   = event.target;         // DOM element, in this example .owl-carousel
	var name      = event.type;           // Name of the event, in this example dragged
	var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
	var items     = event.item.count;     // Number of items
	var item      = event.item.index;     // Position of the current item
	// Provided by the navigation plugin
	var pages     = event.page.count;     // Number of pages
	var page      = event.page.index;     // Position of the current page
	var size      = event.page.size;      // Number of items per page
}
```

{{#each events}}
### {{namespace}}

{{#each events}}
#### {{name}}

Type: `{{type}}`
{{#isnt callback undefined}}Callback: `{{callback}}`
{{/isnt}}{{#isnt param undefined}}Parameter: `{{param}}`
{{/isnt}}

{{desc}}

------
{{/each}}

{{/each}}

{{/markdown }}