Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

Caroulix

The Axentix carousel

This carousel is checking all the items heights before showing them, and set his own height to the maximum item height found.
This is really useful if you are using items that don't have the same height, so switching between items that don't have the same height will not make all the content under the carousel jump.

If you want to deactivate this option and make the carousel take the new item height after switching, you just have to set the fixedHeight option to false.

img1
img2
img3
img4

This basic caroulix has the AutoPlay option activated, which means that it is gonna switch between his items automatically, with a editable interval.

JavaScript initialization

Once HTML was setup, you can activate the Caroulix with this simple code.
Just pass the id of your Caroulix that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

With arrows

You can add arrows on the sides of your Caroulix, which allows the user to go between the previous and the next caroulix-item.
To create them, you have to create an element with the .caroulix-arrow class and .caroulix-prev or .caroulix-next.

img13
img14
img15
img16

Indicators

The indicators allow you to visualize what caroulix-item is active, and to click on any of them to directly change the active caroulix-item to the one corresponding to the clicked indicator.

img5
img6
img7
img8

Flat indicators

You can use the flat indicators, depending on the design you prefer.

img5
img6
img7
img8

Work with any component

The Caroulix is working with any component, you can even create a navbar carousel, and it's pretty useful, if you want to.

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus, odit eveniet quaerat distinctio dolorem iure adipisci quibusdam obcaecati accusamus pariatur architecto nemo. Hic nulla quia deleniti similique totam molestiae?

Header

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi laborum earum, exercitationem corporis tempore totam provident a doloremque atque omnis deleniti porro ad quaerat voluptatum rerum! Aut iusto fugiat modi!

Header

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia consequatur quod rerum maiores distinctio adipisci! Optio iure minus illum laborum earum dolorum, reiciendis sed delectus maxime libero nemo molestias laboriosam.

Options

Property Default value Description
animationDuration 500 Animation duration in ms.
animationType 'slide' Transition animation name.
The only accepted value at the moment is 'slide'.
fixedHeight true Fix the Caroulix height to the biggest item height.
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
.updateHeight() Check the active element height, and update the caroulix height to this one.
.goTo(number, side) Change the active caroulix-item to the number precised. The "side" allows you to chose the animation direction if you want to modify it.
If you don't precise a "side", it will automatically chose the most logic one.
.next(step) 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 default value is 1.
.prev(step) 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 default value is 1.
.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 : {side, nextElement, currentElement}
side : the side direction where the caroulix slided.
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.