修复移动设备上的反应响应轮播显示

Question

我仍然是 ReactJS 的初学者，我需要创建一个响应式的 Carousel，我需要离开的方式是这样的：

我能够使用 react-responsive-carousel 库在桌面和响应式上创建 Carousel。

问题是，在移动格式中，当我传递每个 Carousel 的 slides 时，预期的行为没有发生。当我点击显示下一张幻灯片时，在轮播中它仍然显示当前幻灯片，只是下一张幻灯片的一部分。

通过显示我制作的简短 gif 更容易解释，请注意当我单击以显示下一张幻灯片时会发生什么。

当它是桌面格式时，轮播是正确的方式，我还制作了一个小 gif 来展示它。

你能告诉我你做错了什么，Carousel 是这样工作的吗？

import React from "react";
import PropTypes from "prop-types";
import "./carousel.scss";

import { Carousel as CarouselLib } from "react-responsive-carousel";

import { CAROUSEL_ITEMS } from "./Carousel.utils";

const Carousel = ({ subtitle, testID, title }) => {
  const items = React.useMemo(
    () =>
      CAROUSEL_ITEMS.map((item) => (
        <div key={item.id}>
          <div className="images">
            <img className="image" src={item.url} alt="" />
          </div>
          <div className="infos">
            <h3>{item.title}</h3>
            <span>{item.subtitle}</span>
          </div>
        </div>
      )),
    []
  );

  return (
    <div data-testid={`${testID}_Container`} className="carousel-container">
      <div className="carousel-header">
        <h5>{subtitle}</h5>
        <h3>{title}</h3>
      </div>
      <div className="carousel-content">
        <CarouselLib
          centerMode
          showStatus={false}
          dynamicHeight={false}
          emulateTouch
          swipeScrollTolerance={50}
          centerSlidePercentage={30}
          showThumbs={false}
          infiniteLoop
          showIndicators
          renderArrowPrev={(onClickHandler, hasPrev, label) =>
            hasPrev && <div />
          }
          renderArrowNext={(onClickHandler, hasNext, label) =>
            hasNext && (
              <button
                type="button"
                onClick={onClickHandler}
                className="custom-arrow"
                data-testid={`${testID}_Button_Next`}
              />
            )
          }
        >
          {items}
        </CarouselLib>
      </div>
    </div>
  );
};

Carousel.propTypes = {
  subtitle: PropTypes.string,
  testID: PropTypes.string.isRequired,
  title: PropTypes.string
};

Carousel.defaultProps = {
  testID: "Carousel",
  subtitle: "READ OUR CLIENT",
  title: "CASES"
};

export default Carousel;

.carousel {
  &-container {
    .images {
      background-color: #fff;
      width: 100%;
      max-width: 416px;
      height: 280px;

      .image {
        width: 100%;
        height: auto;
        background-position: center center;
        background-repeat: no-repeat;
      }

      @media (max-width: 600px) {
        max-width: 270px;
        height: auto;
      }
    }

    .infos {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      h3 {
        font-family: Alliance2;
        color: #000;
        line-height: 0.76;
        font-size: 2.5rem;
        letter-spacing: normal;
        font-style: normal;
        font-weight: normal;
        font-stretch: normal;
        margin: 24px 0 20px 0;

        @media (max-width: 600px) {
          font-size: 1.5rem;
        }
      }

      span {
        font-family: Alliance2;
        color: #000;
        line-height: 0.76;
        font-size: 1rem;
        letter-spacing: normal;
        font-style: normal;
        font-weight: 500;
        font-stretch: normal;
        text-transform: uppercase;
        margin-bottom: 30px;

        @media (max-width: 600px) {
          font-size: 0.625rem;
        }
      }
    }

    .carousel {
      .slide {
        background-color: transparent !important;

        @media (max-width: 1024px) {
          min-width: 50% !important;
        }

        @media (max-width: 600px) {
          min-width: 90% !important;
        }
      }

      .control-dots {

        .dot {
          border-radius: 0 !important;
          background-color: #000 !important;
          width: 33px !important;
          height: 3px !important;
          box-shadow: none !important;
          opacity: 1 !important;

          &.selected {
            height: 7px !important;
          }

          &:focus {
            outline: none !important;
          }
        }
      }
    }
  }

  &-header {
    color: #000;
    font-family: 'Alliance2';
    font-weight: 300;
    margin: auto;
    max-width: 1300px;
    text-transform: uppercase;

    @media (max-width: 960px) {
      align-items: center;
      display: flex;
      flex-direction: column;
    }

    h5 {
      font-size: 1rem;
      font-weight: bold;
      margin: 0;
    }

    h3 {
      height: 80px;
      margin-top: 13px;
      margin-bottom: 44px;

      color: #000;
      font-size: 3.5rem;
      line-height: 1.04;
      letter-spacing: -1.1px;

      @media (max-width: 960px) {
        font-size: 1.87rem;
      }

      @media (max-width: 600px) {
        margin-bottom: 0;
      }
    }
  }

  &-content {
    margin: auto;
    max-width: 1440px;
    width: 100%;

    .custom-arrow {
      position: absolute;
      top: 7em;
      bottom: auto;
      right: 4.3em;
      background-color: transparent;
      border: none;
      border-left: 4px solid #000;
      border-bottom: 4px solid #000;
      width: 67px;
      height: 67px;
      transform: rotate(225deg);
      cursor: pointer;

      &:focus {
        outline: none !important;
      }
    }
  }
}

提前非常感谢您的任何 help/tip。

Answer 1

我不知道 react-responsive-carousel ，我在我的项目中使用 react-slick (here) 并且我从来没有遇到响应问题。

Answer 2

我在使用这个库时遇到了类似的问题，我在我的 Carousel 组件的主要 div 中添加了几行 CSS 解决了移动问题：

@media only screen and (max-width: 600px) {
  .carousel-wrapper{
    max-width: 100%;
  }
}

修复移动设备上的反应响应轮播显示

Fixing react-responsive-carousel display on mobile

javascript

css

carousel

reactjs