Is it possible to make the arrows/buttons on the right and left sides be outside of the carousel items?
Links to the libarary:
Is it possible to make the arrows/buttons on the right and left sides be outside of the carousel items?
Links to the libarary:
You can always add css to the arrows
By default, left arrow has:
left: calc(4% + 1px);
and right arrow has:
right: calc(4% + 1px);
If you have space on the sides of carousel you can change that css.
Adding this to css file worked for me
.react-multi-carousel-list{
position: unset !important;
}
React Code :
<Carousel
swipeable={true}
draggable={true}
autoPlay={false}
showDots={true}
ssr={true}
renderDotsOutside={true}
arrows={true}
dotListClass={styles.carousel_dot}
responsive={responsive}
>
THIS ONE IS WORK FOR ME!
.gd-carousel-wrapper {
position:relative;
}
.gd-carousel {
position:unset;
.react-multiple-carousel__arrow {
position:absolute;
}
.react-multiple-carousel__arrow--left {
left: calc(-3% + 1px)
}
.react-multiple-carousel__arrow--right {
right: calc(-3% + 1px)
}
}
`<div className="gd-carousel-wrapper">
<Carousel
responsive={responsive}
// autoPlay={true}
className="gd-carousel"
>
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
</Carousel>
</div>`