There is a bug If you set fade:true and slidesToShow:3

[lab21gr]

Hi there

i have a case where i need to fade my slides, but each slide should have 3 items inside.
But by using [fade: true, slidesToShow: 3]
create an issue.

If you use the settings below, then only the first element of each "slide" will show.
the second and third will get negative left position and opacity=0

$(".slider").slick({
autoplay: false,
fade: true,
slidesToShow: 3,
slidesToScroll: 3
});

You may see the reproduced issue here:

http://jsfiddle.net/lab21/ew3jhcvx/3/

I thought that i would have 3 items next to each other that will fade for the next group to show....

This happens in all browsers, using the latest jquery & latest slick.js

thank you

[leggomuhgreggo]

Hey @lab21gr fade only works with slidesToShow: 1, but--although complicated--you can hack it with custom CSS to fade if you'd like. Thanks!

[larsmiller]

I came up with a CSS/JS solution to this issue. These are settings for a speed of 300 and an autoplay speed of 3000 using slidesToShow > 1 and fade: false;

CSS

<style>
.slick-slide {
   opacity: 1;
   transition: opacity 300ms ease-in-out;
}
.slick-slide.opacidown {
  opacity: 0;
}
</style>

jQuery

// this is for the first fadeout
setTimeout(function(){
  $('.slick-slide').addClass('opacidown');
},2700);
// all the rest of the transitions after the initial
$('.element').on('afterChange', function(event, slick, currentSlide, nextSlide){
  $('.slick-slide').removeClass('opacidown');
  setTimeout(function(){
    $('.slick-slide').addClass('opacidown');
  },2700);
});

[luchomatic]

I had the same problem, I'll try to implement the fix provided by @larsmiller, but it would be awesome if you guys could solve this in the core of the slick slider. I'm always recommending it against Owl slider but this is a major issue.

[janstieler]

@kenwheeler say it will not be implemented because its not a bug its a feature.
But I think your slogan "the last carousel you'll ever need" is gone with this statement.

[yusufmalikul]

@kenwheeler say it will not be implemented because its not a bug its a feature.
But I think your slogan "the last carousel you'll ever need" is gone with this statement.

it's just marketing gimmick.
ps: i use slick.js

[s-a-s-k-i-a]

even though a marketing gimmick.. I think this is rather a bug than a feature.. at least a not fully thought through feature.. and I am also hoping that @kenwheeler will rethink this and implement compatibility between fade and slidestoscroll > 1

thanks!

[pablo-miralles]

It will be interesting to have this as a feature. Being able to show multiple slides but using the fade animation will be so useful

[odn808]

slick.js always makes slide the first layer children of the target object.
so you can make your DOM like this:

<ul id="slick_target">
  <li>
      <div>slide photo</div>
      <div>slide photo</div>
      <div>slide photo</div>
  </li>
  <li>
      <div>slide photo</div>
      <div>slide photo</div>
      <div>slide photo</div>
  </li>
  ...
</ul>

and use the option "fade:true".

[s-a-s-k-i-a]

@odn808 Brainz! Why didn't I think of this! Thanks, mate. Super easy solution.