How to change the layout and styles of Carousel Items on mobile
nisarhassan12 opened this issue · 3 comments
Currently each item in the Carousel span 30%
width and is floated to left.
I'm trying to figure out a way via which I can make the carousel items span 100%
or make the width auto and remove the float. I did the following to acheive the above but it breaks the carousel on mobile and while dragging to left and right some items at the end are skipped with a glitch.
.slides {
& > div {
display: flex;
& > * {
float: none !important;
width: auto !important;
&:not(:last-child) {
margin-right: var(--xx-small);
}
}
}
}
It would be nice If one can have full control of styling and layout while keeping the functionalty intact across different devices. Thanks
It looks like the underlying project is Siema and the perPage
argument can be an object to deal with responsive design. Please check https://codepen.io/pawelgrzybek/pen/dWbGyZ, that should solve the issue without the need for custom CSS.
Thanks. Mike, it does not work well with our use case i.e it does not have a way to have unified margin between the items pawelgrzybek/siema#70:
<Carousel
dots={false}
controls={false}
perPage={{
800: 2,
1200: 3,
}}
>
I am encountering the same issue. Customer was complaining about the missing gap between cards :/