I'm currently using the Swiper Library to create a carousel. I'm having trouble centering my card element in the middle of the screen. Below is an important snippet of code for the component that I need help with. I am utilizing styled components with the Swiper library.
const Wrapper = styled(motion.div)`
height: 200px;
min-width: 300px;
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
position: relative;
&:hover ${Desc} {
transform: translateY(0%);
}
`;
const Card = () => {
return (
<Swiper pagination={true} modules={[Pagination]}>
{sliderItems.map((item) => {
return (
<SwiperSlide key={item.id}>
<Wrapper>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Img src={item.img} />
</Wrapper>
</SwiperSlide>
);
})}
</Swiper>
);
};
Why is my Wrapper div taking up extra space causing the next element not to be visible on the screen?
https://i.sstatic.net/MNxVM.png
https://i.sstatic.net/JKgTA.png
- I want the output to look like this https://i.sstatic.net/eyv1A.jpg