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.

    The carousel-main component that host the main functionality of the carousel

  • 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.