Add custom Active Class to speciied items

[alanleyva]

Hey

This change allows setting a custom active class to the specified idex items Can be used to set a special height or background color to the selected or active items, and not all

Example:

https://user-images.githubusercontent.com/26827563/167489981-e3ff8a8e-ecb1-4074-a116-d3d5165e7e62.mov

I notice this PR https://github.com/YIZHUANG/react-multi-carousel/pull/125 But it doesn't quite work as I needed here. I hope this is helpful

Usage:

<Carousel
  activeItemClass={{
    index:[1],
    className: "active",
  }}
...
/>

For anyone needing the same grow effect here's the CSS

.carousel ul li.active,
.carousel ul li:hover,
.carousel ul li.active,
.carousel ul li:hover {
  transition-delay: 0.5s;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  margin: 0 30px;
  width: 290px !important;
}

[YIZHUANG]

This looks very good to me, would you be able to add this to the documentation and this example to storybook?

[alanleyva]

Sure I'll do that and let you know.

Thanks!

[alanleyva]

Can you point me in the right direction here? What files should I use to update the documentation and storybook?

[YIZHUANG]

@alanleyva I have taken a closer look at this, i think the api for this could be made to fit more use cases. See my following example:

const indices = [1,2,3,4]
<Carousel
  setItemClass={(index, isVisible, isBeingFocused) => {
   if(index===1) {
    return "active" 
} 
return '';

  }}
...
/>

i think this will have more flexibility where we give more control to the users. Let me know what you think and to be honest i am still a little bit uncertain about this, cause i can't seem to find a lot of use cases for this, is this something you have seem in other Carousels? If so can i have a link to it to benchmark?

[alanleyva]

Yeah, actually than can work, the change you made.

I'm working on a "Netflix-like" website and I was using your carousel library, I had to drop it and build my own because it was missing this functionality, so I can tell the user which item is selected, like the video I posted on the first comment I figure there might be others with the same issue as mine, that's why I am submitting the PR. But it's up to you if you think this will be useful or not.