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

admin管理员组

文章数量:1432640

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 ponent for them to work. Unless you put them above the carousel, they won't work.

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 ponent for them to work. Unless you put them above the carousel, they won't work.

• javascript
• reactjs
• button
• carousel
• react-multi-carousel

Share Improve this question Follow edited Feb 9, 2024 at 16:10 Laura White 35244 silver badges1111 bronze badges asked Jul 18, 2022 at 5:28 EvaldasEvaldas 20622 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>
     )
}

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

create a ponent:

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

本文标签： javascriptHow to move reactmulticarousel custom buttons at the top of the carouselStack Overflow