Install and Simple use

hz-carousel

hz-carousel is an haztivity resource to create a carousel of images and/or contents.
hz-carousel uses slick-carousel under the hood.

Dependencies

• JQuery
• slick-carousel
• haztivity/core

Simple use

Pug

div(data-hz-resource="HzCarousel")
    div Slide 1 content
    div Slide 2 content

or

HTML

<div data-hz-resource="HzCarousel">
    <div>Slide 1 content</div>
    <div>Slide 2 content</div>
</div>

page.ts

import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzCarouselResource} from "@haztivity/hz-carousel";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "6611",
        resources: [
            HzCarouselResource
        ],
        template: template
    }
);

Options

All the options of slick excepts functions could be specified by attributes using:

data-opt-slick-[option]=[value]

If the option have multiple words, use dashes, for example use adaptative-height to set the adaptiveHeight option.

For example:

div(data-hz-resource="HzCarousel"
    data-opt-slick-arrows="false"
    data-opt-slick-append-dots="true"
    data-opt-slick-adaptative-height="true")
    div Slide 1 content
    div
        p Slide 2 content 1
        p Slide 2 content 2
        p Slide 2 content 3
        p Slide 2 content 4
        p Slide 2 content 5
        p Slide 2 content 6

or

HTML

<div data-hz-resource="HzCarousel" data-opt-slick-arrows="false" data-opt-slick-dots="true" data-opt-slick-adaptative-height="true">
    <div>Slide 1 content</div>
    <div>
        <p>Slide 2 content 1</p>
        <p>Slide 2 content 2</p>
        <p>Slide 2 content 3</p>
        <p>Slide 2 content 4</p>
        <p>Slide 2 content 5</p>
        <p>Slide 2 content 6</p>
    </div>
</div>