Skip to content

Latest commit

 

History

History
103 lines (93 loc) · 2.25 KB

Carousel.md

File metadata and controls

103 lines (93 loc) · 2.25 KB
Raw

Carousel

back to Content

description

Carousel is a wrapper class to quickly build a bootstrap style Carousel

API

constructor

Constructor Description
new CarouselItem(id: string, carouselItems: array[CarouselItem], options: object) create a bootstrap styled Carousel instance 
        options: {
          withIndicators: boolean = true,
          withControl: boolean = true,
          style: object = {}
        }

method

Return Method Description
HtmlDomElement get() return the dom carousel element

usage

import React from "react";
import {
  Carousel as BootstrapCarousel,
  CarouselItem
} from "cicero/lib/client";
export default class Carousel extends React.Component {
  constructor(props) {
    super(props);
    const style = {
      height: "300px",
      width: "100%"
    };
    const carouselItems = [
      new CarouselItem({
        content: "<div/>",
        caption: "<h5>cicero bootstrap-carousel</h5><p>slide-0</p>",
        style: { ...style, background: "#ff7251" }
      }),
      new CarouselItem({
        content: "<div/>",
        caption: "<h5>cicero bootstrap-carousel</h5><p>slide-1</p>",
        style: { ...style, background: "#f5a142" }
      }),
      new CarouselItem({
        content: "<div/>",
        caption: "<h5>cicero bootstrap-carousel</h5><p>slide-2</p>",
        style: { ...style, background: "#ffca7b" }
      })
    ];
    this.carousel = new BootstrapCarousel("cicero-carousel", carouselItems, { style }).get();
  }
  componentDidMount() {
    this._div.append(this.carousel);
  }
  render() {
    return <div ref={r => (this._div = r)} style={{ display: "flex", justifyContent: "center", margin: "10px 0" }}></div>;
  }
}