How to move react-multi-carousel custom buttons at the top of the carousel?

Question

I have a react-multi-carousel library, and I made custom buttons for it, but I can't find a way to move buttons to the top of the carousel. Instead, it is at the bottom by default and position absolute, which just messes everything up on different screens.

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;
  } */
`;

I think you can only pass these buttons to a carousel component for them to work. Unless you put them above the carousel, they won't work.

Answer 1

To move the react-multi-carousel Arrow buttons to the top position, there is no need to create custom buttons

create a component:

import React from 'react';
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

function NameOfFunction() {
  const responsive = {
    superLargeDesktop: {
      breakpoint: { max: 4000, min: 3000 },
      items: 1,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 1,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 1,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };

  return (
    <div className="">
      <Carousel
        swipeable={true}
        draggable={true}
        showDots={true}
        responsive={responsive}
        ssr={true}
        infinite={true}
        renderDotsOutside={true}
        autoPlay={false}
        arrows={true}
        dotListClass="custom-dot-list-style"
      >
        <img src="1.jpeg" className="slider" alt="Slide 1" />
        <img src="2.jpg" className="slider" alt="Slide 2" />
        <img src="3.jpg" className="slider" alt="Slide 3" />
        <img src="4.jpeg" className="slider" alt="Slide 4" />
      </Carousel>
    </div>
  );
}

Use this code in the CSS file.

.slider {
  padding-top: 80px;
  height: 600px;
  width: 100%;
}
button.react-multiple-carousel__arrow.react-multiple-carousel__arrow--right {
  top: calc(0% + 1px);
  right: calc(5% + 1px);
}
button.react-multiple-carousel__arrow.react-multiple-carousel__arrow--left {
  top: calc(0% + 1px);
  left: calc(86% + 1px);
}

Answer 2

   // 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>
     )
}