YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

add partialGutter to centerMode #317

Open schoenwaldnils opened 2 years ago

schoenwaldnils commented 2 years ago

should help with #160 #186

I'm not 100% sure if this breakes on some other points. Please test and review :)

schoenwaldnils commented 2 years ago

Guys, I tried to add partialGutter with center mode, but doesn't seem to work for me.

is there any possible way to create this kind of slider with the help of centerMode, I mean can I set the left and right peeks values according to me,, like how much i want to show the peeks from sides Screenshot 2022-03-25 171613

This should be possible with this PR

example config:

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    partialVisibilityGutter: 40,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    partialVisibilityGutter: 30,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    partialVisibilityGutter: 30,
  }
}
<Carousel partialVisible centerMode responsive={responsive}>
  <ItemOne />
  <ItemTwo />
</Carousel>

(the combination of partialVisible an centerMode throws an error without this PR)

schoenwaldnils commented 2 years ago

@YIZHUANG I'm not entirely sure if my calculation is wrong or the CI checks needs to be updated. Visually it looks good to me. Can you look into it?

mahabeer commented 2 years ago

Guys, I tried to add partialGutter with center mode, but doesn't seem to work for me. is there any possible way to create this kind of slider with the help of centerMode, I mean can I set the left and right peeks values according to me,, like how much i want to show the peeks from sides Screenshot 2022-03-25 171613

This should be possible with this PR

example config:

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    partialVisibilityGutter: 40,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    partialVisibilityGutter: 30,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    partialVisibilityGutter: 30,
  }
}
<Carousel partialVisible centerMode responsive={responsive}>
  <ItemOne />
  <ItemTwo />
</Carousel>

(the combination of partialVisible an centerMode throws an error without this PR)

Okay, I am eagerly waiting for this functionality, do you have any idea when this PR is going to merge?

YIZHUANG commented 2 years ago

Sorry, i will find time and take a look

YIZHUANG commented 2 years ago

@mahabeer @schoenwaldnils To make this release smoother would you help test the existing behaviours are still working? And please also let me know how you tested the changes as well.

vickywane commented 1 year ago

@YIZHUANG @schoenwaldnils any update on this PR?

I'll be glad to help on the PR as this is a needed feature for me.

agatakozinska commented 1 year ago

@YIZHUANG do you have any idea when this one could be merged? Or do you need any help?

johncastorina commented 6 months ago

I would very much like to see this feature merged in and a new release cut.