Enable Accordion Web Component

This webcomponent follows the open-wc recommendations.

Preamble

Enable webcomponents are very opinionated components for a reason. They were developed for 2 reasons:

1. To be accessible
2. To help developers learn how to code with accessibility in mind.

It's important to match the example implementations and only deviate when the component allows it. If you don't follow the examples, there's a good chance it won't work :)

The carousel is a complex control that only functions with javascript enabled. Otherwise, all the content is simply displayed on screen.

Installation

npm i enable-wc-carousel

Note - You must be using a local server that can resolve node_modules internally. We recommend using web-dev-server (https://modern-web.dev/docs/dev-server/overview/) which jas a flag --node-resolve that will resolve the imports automatically. When you're ready to deply to production, you can bundle it with the project compiler.

Usage

<enable-carousel width="1120">
        <div>
            <img src="../src/images/carousel/00-turkish-spider-man.jpg"
                alt="Bootleg versions of Spider-Man, Captain America and El Santo fighting.">
            <div>
                <h2 lang="tr">3 Dev Adam</h2>
                <p>Also known as <em>Turkish Spider-Man</em>, this 1973 film is the story of crime boss
                    Spider-Man's battle with law enforcement heros Captain America and El Santo.</p>
                <a part="link" href="https://en.wikipedia.org/wiki/3_Dev_Adam"
                    aria-describedby="slide01-title">Learn More</a>
            </div>
        </div>
        <div>
            <img src="../src/images/carousel/02-turkish-star-wars.jpg"
                alt="Cüneyt Arkın kicking and fighting two beasts that look like they are in low budget furry costumes, while a woman being held by one of them looks on in awe.">
            <div>
                <h2>Turkish Star Wars</h2>
                <p>Originally called <em lang="tr">Dünyayı Kurtaran
                        Adam</em>, two space fighters crash into a desert planet and fights a mysterious Wizard who
                    is
                    enslaving
                    the local population.</p>
                <a part="link" href="https://en.wikipedia.org/wiki/D%C3%BCnyay%C4%B1_Kurtaran_Adam"
                    aria-describedby="slide02-title">Learn More</a>
            </div>
        </div>
        <div>
            <img src="../src/images/carousel/01-samurai-cop.jpg"
                alt="A man with a mullet and a maniacal face holding a sword in the middle of a field.">
            <div>
                <h2>Samurai Cop</h2>
                <p>The story of a cop with an epic mullet and a samuari sword who, along with his cool
                    parner, take on a gang of cocaine smugglers in early '90's Los Angeles.
                </p>
                <a part="link" href="https://en.wikipedia.org/wiki/Samurai_Cop"
                    aria-describedby="slide03-title">Learn More</a>
            </div>
        </div>
    </enable-carousel>

<script type="module">
    import { Carousel } from 'enable-wc-carousel';
</script>

Props

These props can be added/changes on the web component.

width - This is the total width (in pixels) of the carousel.

arrows - (optional) An object with the attributes for the arrow icon and aria-labels. For example:

arrows='{"prevLabel": "previous", "prevContent": "«", "nextLabel": "next", "nextContent": "»"}'

Styling

The components use 'parts' to style individual elements. The accordion supports the following parts:

slide - The individual slide within the carousel.

indicator / selected - The indicator below the slides. When it's active, it has the 'selected' attribute.

arrow / prev / next / disabled - (Optional, when the 'arrow' prop is used) The various arrows used in the sliders and the disabled state.

slide-container - The container for all the slides in the carousel.

carousel-container - The carousel container element.

arrow-container - (Optional) The container element for the arrows.

Example

enable-carousel::part(<part-name>) {
    /* add styles here */
}