I am creating a carousel using react-multi-carousel. I want to be add spacing between each item. Currently, if I add padding to the itemClass, it breaks the functionality of the carousel (the arrow buttons no longer go the appropriate distance).
Code for the carousel:
<Carousel
responsive={responsive}
arrows
className="carousel"
containerClass="container"
dotListClass=""
draggable
focusOnSelect={false}
itemClass="project-item"
keyBoardControl
minimumTouchDrag={80}
pauseOnHover
partialVisible={false}
rewind={false}
rewindWithAnimation={false}
rtl={false}
showDots={false}
sliderClass=""
slidesToSlide={1}
swipeable
>
{projects.map((project) => (
<div
key={project.title}
style={{
backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), url(${project.image})`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
}}
className="project-item-content"
>
<div className="project-item-title-container">
<span className="project-item-title">{project.title}</span>
</div>
</div>
))}
</Carousel>
According to this GitHub issue there is no prop to add spacing between the items, the only way for now is to add padding or margin to the item
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.