The first time next arrow is clicked, it will behave as if I clicked previous and inserts an empty item into the carousel

Hey there, I have an instance of react-responsive-carousel that is paging incorrectly on the first click of pagination when either at the beginning or the end of the items.

I have captured the behavior in a gif. Basically, the first time I click the next arrow, it will behave as if I clicked previous and act as if it’s inserting an empty item into the carousel and page in the wrong direction. Then when I reach the end of the items, it does it again in the opposite direction.

Here’s my code for context.

This first file is the general carousel component that will spit out the children we give it:

import "./carousel.scss";
import { bool, node, number, string } from "prop-types";
import { Carousel } from "react-responsive-carousel";
import React from "react";
import { homeCarouselPaged } from "../../../../../util/analytics/tracking";

export default class HomeCarousel extends React.Component {
  static propTypes = {
    children: node,
    centerMode: bool,
    centerSlidePercentage: number,
    className: string,
    showArrows: bool,
    showIndicators: bool,
    showStatus: bool,
    showThumbs: bool,
    trackingContext: string.isRequired
  };

  static defaultProps = {
    centerMode: false,
    centerSlidePercentage: 80,
    className: "",
    showArrows: false,
    showIndicators: true,
    showStatus: false,
    showThumbs: false
  };

  handleChange = () => {
    homeCarouselPaged(this.props.trackingContext);
  };

  render() {
    const {
      centerMode,
      centerSlidePercentage,
      className,
      showArrows,
      showIndicators,
      showStatus
    } = this.props;

    return (
      <Carousel
        centerMode={centerMode}
        centerSlidePercentage={centerSlidePercentage}
        className={className}
        dynamicHeight={false}
        // NOTE: Uncomment /emulateTouch/ for testing on PC
        emulateTouch
        onChange={this.handleChange}
        showArrows={showArrows}
        showIndicators={showIndicators}
        showStatus={showStatus}
        showThumbs={false}
      >
        {this.props.children}
      </Carousel>
    );
  }
}

The previous component is getting it’s children from here. I am mapping over a JSON object that gives me the 10 children that the Carousel uses:

import Carousel from "../carousel";
import { Link } from "react-router-dom";
import React from "react";
import { bool } from "prop-types";
import phrases from "./locales/en.yml";
import styles from "./styles.scss";
import { withSizes } from "../../../../../components/responsive/responsive";

@withSizes
export default class BrowsePhotos extends React.Component {
  static propTypes = {
    isSmScreen: bool,
    isMdScreen: bool,
    isLgScreen: bool
  };

  renderCards() {
    return phrases.text.categories.map(category => (
      <Link key={category.title} to={category.href}>
        <div className={styles.card}>
          <div className={styles.cardCover}>
            <img src={category.cover} />
          </div>
          <div className={styles.cardTitle}>{category.title}</div>
        </div>
      </Link>
    ));
  }

  render() {
    const { isSmScreen } = this.props;
    const slidePercentage = isSmScreen ? 45 : 20;

    return (
      <div className={styles.container}>
        <Carousel
          centerMode
          centerSlidePercentage={slidePercentage}
          className={styles.carousel}
          showArrows={!isSmScreen}
          showIndicators={false}
          trackingContext="browse photos"
        >
          {this.renderCards()}
        </Carousel>
      </div>
    );
  }
}

[robabby]

@huykon @Sri-Linga My solution was to use react-slick instead.

https://www.npmjs.com/package/react-slick

[ArnoCoorevits]

I am still seeing this issue, any updates ? 😃