Блог

Я использую react-multi-carousel, что я хотел бы сделать, так это всегда располагать стрелки посередине и за пределами рамки, как я могу это сделать? Есть ли какой-нибудь трюк в css для выполнения этого?

Я попытался поместить react-multiple-carousel__arrow-влево и react-multiple-carousel__arrow-вправо с абсолютной позицией, но при этом стрелки всегда будут располагаться вверху страницы. Ниже приведен мой код на данный момент…

  <CarouselWrapper>
        <Carousel
          customLeftArrow={<CustomLeftArrow />}
          customRightArrow={<CustomRightArrow />}
          renderButtonGroupOutside={true}
          customButtonGroup={<ButtonGroup />}
          responsive={responsive}
          arrows={false}
        >
          <div className="image">1</div>
          <div className="image">2</div>
          <div className="image">3</div>
          <div className="image">4</div>
          <div className="image">5</div>
          <div className="image">6</div>
        </Carousel>
 </CarouselWrapper>

css

.image {
  height: 150px;
  width: 150px;
  font-size: 25px;
  margin: 10px;
  display: inline-block;
  line-height: 100px;
  border: 3px red solid;
}


 function CustomRightArrow({ onClick }) {
    return (
      <button
        onClick={handleClick}
        aria-label="Go to next slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--right"
      />
    );
  }

  function CustomLeftArrow({ onClick }) {

    return (
      <button
        onClick={handleClick}
        aria-label="Go to previous slide"
        className="react-multiple-carousel__arrow react-multiple-carousel__arrow--left"
      />
    );
  }

  const ButtonGroup = ({ next, previous }) => {
    return (
      <div className="carousel-button-group">
        <CustomLeftArrow
          onClick={() => previous()}
        />
        <CustomRightArrow onClick={() => next()} />
      </div>
    );
  };