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.

img1
img2
img3
img4

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.

img1
img2
img3
img4

Multiple elements caroulix

Card header 1

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!

Card header 2

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!

Card header 1

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!

Card header 2

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!

Card header 1

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!

Card header 2

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
            
              {
                enabled: false,
                isFlat: false,
                customClasses: ''
              }
            
          
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
            
              {
                enabled: true,
                interval: 5000,
                side: 'right'
              }
            
          
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.