In this page you will find beta features for Style library. This features only work with classes are not (yet) customizable in Block Styles.

Item Slider

The item slider can be of any kind of item, group, columns, an image gallery etc. In order to get the slider to work there must be a parent element (the one that has all the slider items) with specific classes to have specific behaviors.

Depending if its automatic or not, the slider itself correspond of one or three elements.

If there must be button to go right or left on the slider:

1. The element that enclose all the rest of elements (group, container, column etc) must have the CSS class “ea-item-slider-container”
2. The element that has the slider items (group, container, column etc) must have the CSS class “ea-item-slider” By default the slider show one item at a time in mobile. This element can have other class like “ea-item-slider-2-cards”, “ea-item-slider-3-cards” or “ea-item-slider-4-cards”. These pretty much dictate how many items are shown at a time from desktop sizes
3. The elements that use to move to the right or left of the slider ca be any element but must have “ea-item-slider-control-next” CSS class or “ea-item-slider-control-prev” CSS class.

When it comes to the slider itself it can have other properties by CSS classes, as such:

1. ea-infinite-slider: this class make the slider infinite by always repeating the item indefinitely giving the sense that the slider is infinite
2. ea-automatic-slider: this class will make the slider move from Left to Right automatically at an hardcoded speed. If a slider is automatic it should NOT have ea-item-control-next buttons
   1. ea-smooth-slider: this is a class that only does something if it has ea-automatic-slider class. It makes the slider run smoothly instead of one item at a time
   2. ea-slider-dir-ltr: with this class the slider will run from right to left. By default it goes from left to right.