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.
Share Improve this question edited Feb 9, 2024 at 16:10 Laura White 3524 silver badges11 bronze badges asked Jul 18, 2022 at 5:28 EvaldasEvaldas 2062 silver badges9 bronze badges2 Answers
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);
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745580659a4634236.html
评论列表（0条）