How to change the layout and styles of Carousel Items on mobile

nisarhassan12 commented 3 years ago

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

mikenikles commented 3 years ago

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.

nisarhassan12 commented 3 years ago

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 https://github.com/pawelgrzybek/siema/issues/70:

<Carousel 
  dots={false} 
  controls={false}
  perPage={{
    800: 2,
    1200: 3,
  }}
>

mcmxcdev commented 2 years ago

I am encountering the same issue. Customer was complaining about the missing gap between cards :/

beyonk-group / svelte-carousel

How to change the layout and styles of Carousel Items on mobile #62