search

maxmarinich / react-alice-carousel

React responsive component for building content galleries, content rotators and any React carousels
MIT License
842 stars 92 forks source link

Items take all available width when number of items is less than the one in the responsive config object #263

Closed hichemfantar closed 1 year ago

hichemfantar commented 1 year ago

If we have 2 elements at >=1024px and the config says 3 elements. Right now it becomes as if the first element takes up 1.5/3 and second element takes up 1.5/3. When It should be: First element takes up 1/3. Second element takes up 1/3. Third element is an empty div that takes up 1/3. https://maxmarinich.github.io/react-alice-carousel/#basic

maxmarinich commented 1 year ago

Hi, @hichemfantar! Fixed in #264

hichemfantar commented 1 year ago

The new update broke the breakpoints. I believe you misunderstood my issue. My issue isn't with the breakpoint, It's with the way items are rendered when the number of items is less than the number of items specified at a certain breakpoint.

maxmarinich commented 1 year ago

Why did the breakpoints break? According to code, the case with item`s count is expected behavior:

if (Number(key) <= value) {
    itemsInSlide = Math.min(responsive[key].items, itemsCount) || itemsInSlide;
}
cassandrafsmith commented 1 year ago

I'm having a similar issue. I have my response object set the same as in the basic example that you have on your example website. However, no matter what size screen I am viewing it on, only one card is displayed in the carousel.

maxmarinich commented 1 year ago

Fix responsive flow, add new feature in #265. Please see https://maxmarinich.github.io/react-alice-carousel/#responsive.