genk-interactive-carousel

Interactive carousel built with Lit-Element. This webcomponent follows the open-wc recommendation.

Table of Contents

1. Installation
2. Built With
3. Usage
4. Properties
5. Events
6. Linting
7. Testing
8. Tooling configs
9. Local Demo
10. Contact

Installation

npm install genk-interactive-carousel --save

Built With

• Node.js (v18.0.0)
• Lit

Usage

<script type="module">
  import 'genk-interactive-carousel/genk-interactive-carousel.js';
</script>

<genk-interactive-carousel>
  <p>First slide</p>
  <p>Second slide</p>
  <p>Third slide</p>
  <p>Fourth slide</p>
</genk-interactive-carousel>

Properties

• slideIndex: Number that indicates the current active slide
• animations: Object with the animations in Web Animation API Format, see src/animations.js for more details.

const SLIDE_LEAVE = [
  SLIDE_LEAVE_KEYFRAMES,
  SLIDE_LEAVE_OPTS
];
const SLIDE_ENTER = [
  SLIDE_ENTER_KEYFRAMES,
  SLIDE_ENTER_OPTS
];

const ANIMATIONS = {
  slideEnter: SLIDE_ENTER,
  slideLeave: SLIDE_LEAVE
};

Events

• genk-ic-next: dispatched when slide change to next one ➡️
• genk-ic-prev: dispatched when slide change to previous one ⬅️

Linting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo

npm run start

Contact

Pablo Álamo - LinkedIn - [e-mail]

(back to top)