Add .slick-active class on slides that are visible

[weaintplastic]

When reaching the end of a finite slider with multiple slides, not all of them do get the .slick-active class.

Here's a little snapshot to describe the issue.

The slider is set up as following:

slidesToShow={4}
slidesToSroll={4}
infinite={false}

Initial - first 4 slides visible

<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>

After click on next arrow (actual behavoir) - last 4 slides visible

<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>

After click on next arrow (expeted behavoir) - last 4 slides visible

<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>

Is this an expected bahvoir? If not, I've a fix ready and I'm happy to file a pull request.

Best

Roland

[weaintplastic]

hey @akiran. did you have any chance to take a look at this proposal? Would love to get your feedback.

Thanks,

Roland

[brownsmith]

You should be able to do this in your component using componentWillReceiveProps and the nextProps. You know the length of the array of slides, react-slick gives you your currentSlide, and you know how many slides you're showing in the carousel, in your case 4 slides. If currentSlide = 0, and you're displaying 4 slides, then positions 0-3 in your array are 'active'

[weaintplastic]

@brownsmith thanks for the fast reply. You mean the componentWillReceiveProps of my slide component? This is what I get there as nextProps:

children:Object
className:"slick-slide"
data-index:1
onClick:function onClick(e)
style:Object
tabIndex:"-1"

So there is no hint on the current slide included.

[weaintplastic]

I'll try to hook into the beforeChange callback

[weaintplastic]

Okay. this seems to be an option but just as long as there are no responsive settings set up. As soon as there are responsive settings I end up doing the same match media calculations outside of the Slider component which adds redundant complexity.

[brownsmith]

This is true, we're having to do the same thing twice depending on the number of slides at both of our breakpoints. It's overkill, but it solved our problem. Perhaps it could be passed out to a helper function with the number of slides as an argument? It's a problem I'll have to fix myself at some point.

[weaintplastic]

Also recalculating the active slide in the main component causes the slides to rerender and therefore it breaks the animation. Only option I currently see is to share it with context which is also not nice.

[marcbey]

This is still an issue. My workaround was setting slidesToScroll option one lower then the slidesToShow option.

[laveesingh]

This has been fixed way back, please make sure you're using the latest version.

[maxval1]

The same issue version 0.23.1 https://codesandbox.io/s/ymn9kr8xjz Broken slick-active and aria-hidden for latest slide after click nextArrow Settings

var settings = {
  slidesToShow: 2,
  slidesToScroll: 2
};

[loginov-rocks]

This has not been fixed, since there is no logic to handle this case: https://github.com/akiran/react-slick/blob/master/src/track.js#L32-L34

[qqli1209]

Hi @maddhruv @akiran Is there any update on the issue?

[re11434]

@akiran Do you plan on fixing this issue any time soon? It would be greatly appreciated

[yasenhaji]

@akiran same issue on v0.25.2 !!

[mizanmahi]

How can I set my active style on the custom paging? or how can I modify slick-active class.?