wc-materializecss-carousel v1.0.3

Stencil Web Component MaterializeCSS Carousel

This is an application of materializecss carousel as web component, created with stencil, this is not official.

The official Materializecss carousel can be found here: https://materializecss.com/carousel.html.

The github for this stencil web component project: https://github.com/leonardopaiva/wc-materializecss-carousel.

There you can generate your own web component if you have more specific needs, and contributions are welcome.

menu

• Installing to basic html js project
• example with custom template
• example with array of items
• Install in Angular
• example Angular array of items example
• example Angular custom template
• Angular, React, Vue, Ember, Javascript official stencil integration guide https://stenciljs.com/docs/overview

Installing to basic html js project

back to menu

Run npm install wc-materializecss-carousel --save

Add scripts:

<script type="module" src="node_modules/wc-materializecss-carousel/dist/wc-materializecss-carousel/wc-materializecss-carousel.esm.js"></script><br />
<script nomodule src="node_modules/wc-materializecss-carousel/dist/wc-materializecss-carousel/wc-materializecss-carousel.js"></script><br />

Example with custom template

back to menu

html

<wc-materializecss-carousel>
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/3"></a>
  </div>
</wc-materializecss-carousel>

css, but you dont need to use this css, the default values will be 400px.

<style>
  wc-materializecss-carousel .carousel {
    height: 100px;
  }
  wc-materializecss-carousel .carousel .carousel-item {
    width: 100px;
    height: 100px;
  }
</style>

js

<script>
  var options = {
    dist: -100
  };

  initCarousel("wc-materializecss-carousel");

  function initCarousel(selector) {
    var cmp = document.querySelector(selector);

    if (cmp === null) return;

    cmp.addEventListener('mcssCarouselComponentDidLoad', event => { onDidLoad() })

    function onDidLoad() {
      if (typeof M === "undefined") {
        console.log("M not defined!");
        return;
      }

      var carouselTarget = cmp.querySelector(".carousel");

      var instance = M.Carousel.init(carouselTarget, options);
    }
  }
</script>

Example with array of items

back to menu

html

 <wc-materializecss-carousel template="false"></wc-materializecss-carousel>

css you dont need this css, default values will be 400px;

<style>
  wc-materializecss-carousel .carousel {
    height: 300px;
  }
  wc-materializecss-carousel .carousel .carousel-item {
    width: 300px;
    height: 300px;
  }
</style>

js

 <script>
  //defaults
  var options = {
    dist: -100
  };

  var defaultArray = [
    {
      id: 0,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/1',
      link: 'https://lorempixel.com/250/250/nature/1',
      alt: 'Imagem 01',
      target: ''
    },
    {
      id: 1,
      title: '',
      url: "https://lorempixel.com/250/250/nature/2",
      link: 'https://lorempixel.com/250/250/nature/2',
      alt: 'Imagem 02',
      target: '_blank'
    },
    {
      id: 2,
      title: '',
      url: "https://lorempixel.com/250/250/nature/3",
      link: 'https://lorempixel.com/250/250/nature/3',
      alt: 'Imagem 03',
      target: ''
    },
    {
      id: 3,
      title: '',
      url: "https://lorempixel.com/250/250/nature/4",
      link: 'https://lorempixel.com/250/250/nature/4',
      alt: 'Imagem 04',
      target: ''
    },
    {
      id: 4,
      title: '',
      url:"https://lorempixel.com/250/250/nature/5",
      link: 'https://lorempixel.com/250/250/nature/5',
      alt: 'Imagem 05',
      target: ''
    }
  ];

  initCarousel("wc-materializecss-carousel");

  function initCarousel(selector) {
    var cmp = document.querySelector(selector);

    if (cmp === null) return;

    cmp.items = defaultArray;

    cmp.addEventListener('mcssCarouselComponentDidLoad', event => { onDidLoad() })

    function onDidLoad() {
      if (typeof M === "undefined") {
        console.log("M not defined!");
        return;
      }

      var carouselTarget = cmp.querySelector(".carousel");

      var instance = M.Carousel.init(carouselTarget, options);
    }
  }
</script>

Install in Angular

back to menu

Run npm install wc-materializecss-carousel --save

Add scripts:

add import to src/main.ts file, and call defineWCMaterializeCSS(window)

import { defineCustomElements as defineWCMaterializeCSS } from 'wc-materializecss-carousel/loader';

defineWCMaterializeCSS(window);

add CUSTOM_ELEMENTS_SCHEMA to src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA // Tells Angular we will have custom tags in our templates
  ]
})
export class AppModule { }

Angular examples

example Angular custom template

back to menu

html

<wc-materializecss-carousel #mcssCarousel>
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/3"></a>
  </div>
</wc-materializecss-carousel>

css you dont need this css, default values will be 400px;

<style>
  wc-materializecss-carousel .carousel {
    height: 300px;
  }
  wc-materializecss-carousel .carousel .carousel-item {
    width: 300px;
    height: 300px;
  }
</style>

app.component.ts

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, AfterViewInit  {

  @ViewChild('mcssCarousel', {static: false}) mcssCarousel: ElementRef;

  options = {
    dist: -100
  };

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.initCarousel(this.mcssCarousel);
  }

  initTest(): void {
  }

  initCarousel(element: ElementRef): void {

    const cmp = element.nativeElement;

    if (cmp === null) return;

    cmp.addEventListener('mcssCarouselComponentDidLoad', event => { this.onDidLoad(cmp); });

  }

  onDidLoad(cmp): void {
    // @ts-ignore
    if (typeof M === 'undefined') {
      console.log('M not defined!');
      return;
    }

    const carouselTarget = cmp.querySelector('.carousel');

    // @ts-ignore
    const instance = M.Carousel.init(carouselTarget, this.options);
  }
}

example Angular array of items

back to menu

html

<wc-materializecss-carousel #mcssCarousel template="false"></wc-materializecss-carousel>

css you dont need this css, default values will be 400px;

<style>
  wc-materializecss-carousel .carousel {
    height: 300px;
  }
  wc-materializecss-carousel .carousel .carousel-item {
    width: 300px;
    height: 300px;
  }
</style>

app.component.ts

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export interface CarouselItems {
  id: number;
  url: string;
  title: string;
  alt: string;
  link: string;
  target: '_blank' | '';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, AfterViewInit  {

  @ViewChild('mcssCarousel', {static: false}) mcssCarousel: ElementRef;

  options = {
    dist: -100
  };

  defaultArray: CarouselItems[] = [
    {
      id: 0,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/1',
      link: 'https://lorempixel.com/250/250/nature/1',
      alt: 'Imagem 01',
      target: ''
    },
    {
      id: 1,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/2',
      link: 'https://lorempixel.com/250/250/nature/2',
      alt: 'Imagem 02',
      target: '_blank'
    },
    {
      id: 2,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/3',
      link: 'https://lorempixel.com/250/250/nature/3',
      alt: 'Imagem 03',
      target: ''
    },
    {
      id: 3,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/4',
      link: 'https://lorempixel.com/250/250/nature/4',
      alt: 'Imagem 04',
      target: ''
    },
    {
      id: 4,
      title: '',
      url: 'https://lorempixel.com/250/250/nature/5',
      link: 'https://lorempixel.com/250/250/nature/5',
      alt: 'Imagem 05',
      target: ''
    }
  ];

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.initCarousel(this.mcssCarousel);
  }

  initTest(): void {
  }

  initCarousel(element: ElementRef): void {

    const cmp = element.nativeElement;

    if (cmp === null) return;

    cmp.items = this.defaultArray;

    cmp.addEventListener('mcssCarouselComponentDidLoad', event => { this.onDidLoad(cmp); });

  }

  onDidLoad(cmp): void {
    // @ts-ignore
    if (typeof M === 'undefined') {
      console.log('M not defined!');
      return;
    }

    const carouselTarget = cmp.querySelector('.carousel');

    // @ts-ignore
    const instance = M.Carousel.init(carouselTarget, this.options);
  }
}