Styles Library Labs
Item Slider
The item slider can facilitate most any kind of item, group, column, image gallery, or other Gutenberg block.
To get the slider to working, there must be a parent element (the one that has all the slider items) with specific classes to have specific behaviors.
Depending if it’s automatic or not, the slider itself corresponds to one or three elements.
If there must be a button to go right or left on the slider:
- The element that encloses all the rest of the elements (group, container, column, etc) must have the CSS class “ea-item-slider-container“.
- 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 on mobile. This element can have other classes 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.
- The elements that use to move to the right or left of the slider can be any element but must have the “ea-item-slider-control-next” CSS class or the “ea-item-slider-control-prev” CSS class.
When it comes to the slider itself it can have other properties by CSS classes, such as:
- ea-infinite-slider: This class makes the slider infinite by always repeating the item indefinitely giving the sense that the slider is infinite.
- ea-automatic-slider: This class will make the slider move from Left to Right automatically at a hardcoded speed. If a slider is automatic it should NOT have ea-item-control-next buttons.
- ea-smooth-slider: This is a class that only does something if it has an ea-automatic-slider class. It makes the slider run smoothly instead of one item at a time.
- ea-slider-dir-ltr: with this class, the slider will run from right to left. By default, it goes from left to right.
Infinite Automatic Smooth Slider LTR
Accordions
Title tab #1
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis massa purus, sit amet posuere augue condimentum ac. Proin mi nunc, sagittis et pulvinar et, malesuada vehicula neque. Quisque euismod nulla eget viverra hendrerit. Ut hendrerit, ante tristique molestie pretium, elit massa posuere est, sit amet efficitur nulla est quis odio. Nunc mi enim, semper non commodo imperdiet, sodales et nulla. Aenean libero enim, faucibus ac enim at, efficitur ornare purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla tortor non dolor placerat, nec dapibus lectus dignissim. Donec tincidunt pretium egestas. Etiam sed placerat arcu.
Title tab #2
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis massa purus, sit amet posuere augue condimentum ac. Proin mi nunc, sagittis et pulvinar et, malesuada vehicula neque. Quisque euismod nulla eget viverra hendrerit. Ut hendrerit, ante tristique molestie pretium, elit massa posuere est, sit amet efficitur nulla est quis odio. Nunc mi enim, semper non commodo imperdiet, sodales et nulla. Aenean libero enim, faucibus ac enim at, efficitur ornare purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla tortor non dolor placerat, nec dapibus lectus dignissim. Donec tincidunt pretium egestas. Etiam sed placerat arcu.
How Do They Work?
- The accordion needs two sections:
- An accordion header
- An accordion content
- The element that encloses both of them (group, container, column, etc) must have the CSS class “ea-block-accordion“.
- The element that has the content (group, container, column, etc) must have the CSS class “ea-block-accordion-content“.
- An element that serves as a button to toggle on/off the accordion needs the CSS class “ea-block-accordion-btn“. It does not matter if it’s a paragraph, a heading, a button, etc. As long as it has that class and it’s outside “ea-block-accordion-content” but inside of “ea-block-accordion”.
Item Slider
What Are People Saying
About Us
Great design! 1
I am helpful in making
websites and business
development that brings quality to
the product by the user.
' d='M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10s10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z'/%3E%3C/svg%3E)
John Doe
Product designer
Great design! 2
I am helpful in making
websites and business
development that brings quality to
the product by the user.
John Doe
Product designer
Great design! 3
I am helpful in making
websites and business
development that brings quality to
the product by the user.
John Doe
Product designer
Great design! 4
I am helpful in making
websites and business
development that brings quality to
the product by the user.
John Doe
Product designer
How Do They Work?
- It needs two sections: the slider controls and the actual slider with multiple items.
- The element that encloses both of them (group, container, column, etc) must have the CSS class “ea-item-slider-container”.
- 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 on mobile.
- This element can have other classes 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.
- The elements used to move to the right or left of the slider can be any element but must have the “ea-item-slider-control-next” CSS class or “ea-item-slider-control-prev” CSS class.
Leave a Reply