akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

prop / func to return what index of the slider you are at? #1514

Open talor-hammond opened 5 years ago

talor-hammond commented 5 years ago

I'm looking for robust way of determining whether the slider is at the very-beginning or very-end of the gallery.

I'm currently using the afterChange prop, but that returns the index of the particular image it ended at and not where it is on the 'dots'.

I need this functionality to conditionally render my custom arrows depending on the point of the slider / gallery it is in; I can make a PR if this is a feature that is missing

philjestin commented 5 years ago

I also needed to do some conditional rendering for custom arrows,

you can specify a component in the settings you provide to the slider component for the keys nextArrow and prevArrow and they get passed in style, className, onClick, and some other props from the library itself. Using this I was able to conditionally render different svg's in my component depending on if it was at the beginning, middle, or end of the carousel. react-slick actually did most of the work

const settings = {
  ...,
  nextArrow: <YourComponent ...anyPropsYouWant />,
  prevArrow: <YourComponent ...anyPropsYouWant />,
}