Caroulix
The Axentix carousel
The caroulix makes you able to display any type of element inside a touch-friendly carousel.
You can custom any option to create the carousel you want.
Caroulix example
This caroulix is using different options.
First, the autoplay mode, which is calling the next() method of the carousel with an interval.
It is using the indicators option too. This option shows simple indicators at the bottom of the carousel.
Using caroulix methods
This example shows you how to use the caroulix methods.
Initializing an element with the data init method,
you have to get the instance before using its methods.
Multiple elements caroulix
A caroulix-item can contain multiple elements.
In this examples, every caroulix-item contain 2 cards.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non veritatis excepturi natus impedit distinctio quidem, nesciunt id possimus quia, tempore fuga doloribus reiciendis facilis voluptate accusantium! Adipisci est nam soluta!
Options
| Property | Default value | Description |
|---|---|---|
| animationDuration | 500 | Animation duration in ms. |
| backToOpposite | true | Back to the opposite when reaching the end of the caroulix. |
| enableTouch | true | Enable touch / mouse swipe. |
| height | '' | Fix the height to the precised height. |
| indicators |
|
Indicators is an object on what you can customize the Caroulix indicators. You can set
isFlat and enabled to
true or false if you want to enable the indicators, and if
you want them flat or not. The customClasses allows you to add your own classes to the indicators. |
| autoplay |
|
Using the autoplay option, you can enable the autoplay mode, which automatically switch between the different caroulix-item.
The interval in ms allows you to custom the delay between each switch. The side allows you to choose the animation direction. Accepted values are 'right' and
'left'.
|
Methods
| Method | Description |
|---|---|
| .goTo(number) | Change the active caroulix-item to the number precised. |
| .next(step, resetAutoplay) |
Goes to the next caroulix-item. The step parameter is optional and allows you to define how much caroulix-items you want to
go through. The resetAutoplay parameter reset the autoplay timer when the method is called (only if the autoplay option is enabled). The default step value is 1. The default resetAutoplay value is true.
|
| .prev(step, resetAutoplay) |
Goes to the previous caroulix-item. The step parameter is optional and allows you to define how much caroulix-items you want to
go through. The resetAutoplay parameter reset the autoplay timer when the method is called (only if the autoplay option is enabled). The default step value is 1. The default resetAutoplay value is true.
|
| .play() | Start the autoplay mode. |
| .stop() | Stop the autoplay mode. |
Events
| Event | Description |
|---|---|
| ax.caroulix.setup | Event sent when the caroulix has been setup. |
| ax.caroulix.slide |
Event sent when the caroulix slides. This event has details data : {nextElement, currentElement} nextElement : the next element. currentElement : the current element.
|
| ax.caroulix.next |
Event sent when the next() method is called. This event has details data : {step} step : how much caroulix-items have been slided.
|
| ax.caroulix.prev |
Event sent when the prev() method is called. This event has details data : {step} step : how much caroulix-items have been slided.
|
Event details
Some events bring details, you can access them with e.details.