Method render

src/Carousel.js:219–317

()

  }

  render() {
    const { cssModule, slide, className, dark, fade } = this.props;
    const attributes = omit(this.props, propsToOmit);
    const outerClasses = mapToCssModules(
      classNames(
        className,
        'carousel',
        fade && 'carousel-fade',
        slide && 'slide',
        dark && 'carousel-dark',
      ),
      cssModule,
    );

    const innerClasses = mapToCssModules(
      classNames('carousel-inner'),
      cssModule,
    );

    // filter out booleans, null, or undefined
    const children = this.props.children.filter(
      (child) =>
        child !== null && child !== undefined && typeof child !== 'boolean',
    );

    const slidesOnly = children.every((child) => child.type === CarouselItem);

    // Rendering only slides
    if (slidesOnly) {
      return (
        <div
          {...attributes}
          className={outerClasses}
          onMouseEnter={this.hoverStart}
          onMouseLeave={this.hoverEnd}
        >
          <CarouselContext.Provider value={this.getContextValue()}>
            {this.renderItems(children, innerClasses)}
          </CarouselContext.Provider>
        </div>
      );
    }

    // Rendering slides and controls
    if (children[0] instanceof Array) {
      const carouselItems = children[0];
      const controlLeft = children[1];
      const controlRight = children[2];

      return (
        <div
          {...attributes}
          className={outerClasses}
          onMouseEnter={this.hoverStart}
          onMouseLeave={this.hoverEnd}
        >
          <CarouselContext.Provider value={this.getContextValue()}>
            {this.renderItems(carouselItems, innerClasses)}