如何移动轮播顶部的react-multi-carousel自定义按钮？

Question

我有一个react-multi-carousel库，我为它制作了自定义按钮，但我找不到将按钮移动到轮播顶部的方法。相反，它默认位于底部并且绝对位置，这只会把不同屏幕上的所有内容搞乱。

const CustomButtonGroup = ({ next, previous }: any) => {
  return (
    <ButtonContainer>
      <div className="container-for-container">
        <section className="third-container">
          <div className="sidebar-buttons-container">
            <button className="left" type="button" onClick={() => previous()}>
              <SVGIconButtonArrow />
            </button>
            <div className="slash">/</div>
            <button className="right" type="button" onClick={() => next()}>
              <SVGIconButtonArrow className="arrow-right" />
            </button>
          </div>
        </section>
      </div>
    </ButtonContainer>
  );
};

export { CustomButtonGroup };

const ButtonContainer = styled.div`
  .container-for-container {
    /* position: relative; */

    position: relative;

    height: 100px;
    border: 3px solid #73ad21;
  }

  .third-container {
    /* position: absolute;
    top: 51.4rem;
    left: 65rem; */

    position: absolute;

    right: 0;
    width: 200px;

    border: 3px solid #73ad21;

    .sidebar-buttons-container {
      display: flex;
      margin-left: 25px;
      button {
        border: none;
        background-color: rgba(0, 0, 0, 0);
        color: ${({ theme }) => theme.colors.black000};
        font-weight: bold;
        font-size: 40px;
        z-index: 33;
        cursor: pointer;
      }

      .arrow-right {
        transform: rotate(180deg);
      }

      .slash {
        font-weight: 100;
        font-size: 40px;
        margin-top: 20px;
      }

      .left {
        padding-right: 20px;
      }

      .right {
        padding-left: 20px;
      }

      .left:active {
        transform: translateX(-4px);
      }

      .right:active {
        transform: translateX(4px);
      }
    }
  }

  /* ${med.xs} {
    top: 47.2rem;
    left: 12rem;
  }
  ${med.sm} {
    top: 46.3rem;
    left: 20rem;
  }
  ${med.custom({ min: 556, max: 1022 })} {
    top: 45.1rem;
    left: 32rem;
  }
  ${med.custom({ min: 1023, max: 1600 })} {
    top: 52.1rem;
    left: 78rem;
  } */
`;

我认为你只能将这些按钮传递给轮播组件才能让它们工作。除非您将它们放在旋转木马上方，否则它们将无法工作。

Answer 1

   // use tailwind css
  import React from 'react';
  import Carousel from 'react-multi-carousel';
  import 'react-multi-carousel/lib/styles.css';
  import { FiChevronLeft } from 'react-icons/fi';
  import { BiChevronRight } from 'react-icons/bi';
  const App = ()=>{
     const responsive = {
     superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 4
     },
     desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 4
     },
     tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4
     },
     mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1
     }
   };
   const ButtonGroup = ({ next, previous, goToSlide, ...rest }: any) => {
      const { carouselState: { currentSlide } } = rest;
      return (
          <div className="carousel-button-group mb-4  gap-4 flex justify-end 
          items-center w-full">
            <button className='block p-3 bg-slate-300' onClick={() => 
            previous()}> <FiChevronLeft /></button>
            <button onClick={() => next()}><span className='block p-3 bg-slate-300' ><BiChevronRight /></span></button>
         </div>
      
       );
     };
     return(
           <div className='w-[85%] mx-auto relative flex flex-col-reverse'>
             <Carousel responsive={responsiveCate} arrows={false} renderButtonGroupOutside={true} customButtonGroup={<ButtonGroup />}>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
                <div className='bg-gray-500 h-[100px]'>Farid</div>
             </Carousel>
      </div>
     )
}

Answer 2

要将react-multi-carousel箭头按钮移动到顶部位置，请将此代码放入CSS文件中

.react-multi-carousel-list {
  position: unset;
}
button.react-multiple-carousel__arrow.react-multiple-carousel__arrow--right {
  top: calc(0% + 1px);
}
button.react-multiple-carousel__arrow.react-multiple-carousel__arrow--left {
  top: calc(0% + 1px);
  left: calc(88% + 1px);
}