Intro
Carousel
A carousel is a dynamic element commonly used to showcase multiple images or pieces of content within a confined space. A carousel is excellent for user interfaces that have confined elements for content. Social networks like Facebook or Instagram use carousels for images. It allows them to show multiple images in a single card in their feeds.
Try the demo below
Demo
The cool cats carousel
Components
-
carousel-main
The main component holds the slot for the slide. It's the main wrapper for all the content. It's divided in three main div's.
1. A div that contains the left arrow.
2. A div that contains a slot for your div slide.
3. A div that contains the right arrow.
-
carousel-slide
This is a placeholder slide with a slot where you can insert content. You can insert individual or repeat items that will populate the slider.
It's easy to add a Carousel to your web app:
Step 1: Add a carousel-main component where you want the carousel
Step 2: Add a carousel-slide component to the carousel-main component (As many as you want to display)
Step 3: Add content to each of the carousel-slide components.