How to Build Auto Carousel Web Component

Last updated on February 1, 2021

In this blog, we will learn how to build an auto carousel web component but without using any 3rd party Javascript library. Yes, using Vanilla JavaScript we will be going to build a simple but Auto Carousel component.

Introduction

One of our previous blog posts, we have covered building an auto carousel component with plain HTML5, CSS3, and JavaScript. I reuse those here but converting into web component.

Requirements

In order to build an auto carousel component what we need here is that carousel count that we will calculate based on an element count of an HTML container.

The default background-color of each carousel item and we differentiate the selected one with different background-color. We use CSS variables to maintain color codes in a single place that we will need to manipulate via JavaScript code also.

The expected auto carousel component would look like below image,

Build Auto Carousel Web Component

We will learn this process step by step so that you can also follow the same process to build your next favorite component as a web component.

• Template
• Custom Element
• Connecting Template with Custom Element
• Employ it

1. Template

Using template HTML tag element we will construct the carousel container and its descendant’s element.

const tmpl = document.createElement('template');
tmpl.innerHTML = `
<div class="container">
<div class="message"><slot name="default"></slot></div>
<div class="carousel"></div>
</div>`;

2. Custom Element

This is the most essential piece of writing web component. What would be the identifier for your web component that will specify it using customElements.define('<tag-name>', class_name);

class AutoCarouselComponent extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('auto-carousel', AutoCarouselComponent);

3. Connecting Template with Custom Element

Here we connect the defined template markup element with our ES6 class (AutoCarouselComponent).

We do this by creating Shadow DOM of our component then appending the template markup this._shadowRoot.appendChild(tmpl.content.cloneNode(true));

class AutoCarouselComponent extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: 'open' });
  }

  // Life Cycle Events
  connectedCallback() {
    // Connect template markup with component class.
    this._shadowRoot.appendChild(tmpl.content.cloneNode(true));
  }
}

connectedCallback( ) is one of the life cycle events that gets fired once after added our web component to the HTML page.

4. Employ Web Component

This is the final piece of building web components. Yes, It is NO value unless putting the built web component into use. But to use our web component we will require a web-component loader script to be imported beforehand.

<!-- Loading Web component loader -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Then we import our web component script file also,

<!-- Auto carousel web component -->
<script src="./index.js"></script>

// index.html
<vj-auto-carousel length="5"> </vj-auto-carousel>

That’s it. Eventually, I have demonstrated with the minimum bare template in order to get a glimpse of building an auto carousel web component.

Reference

• create auto-carousel