Display one item and half of the prev/next ones

Hi,

http://jsfiddle.net/lbineau/vdnphxpg/

I would like to create this effect but I can’t find any example : I tried to do it with transform but at some point there are problems with cloned items (and absolutly not with dragging).

$('.slick').slick({
  centerMode: true,
  centerPadding: '0',
  slidesToShow: 3
});

.slick-slide{
  outline: 0;
  width: 168px;
  height: 309px;
  transition: transform 0.5s;
  &.slick-current.slick-active{
    transform: none;
  }
  &.slick-active{
    transform: translateX(-50%);
  }
  &.slick-current + .slick-active{
    transform: translateX(50%);
  }
}

Any idea ?

[sunil25393]

this worked for me

.slick-list .slick-track{ padding-left: 12.5%; }

formula is this:

padding left = (100%/ no of slide to show)/2;

if no of the slide to show is 2, padding-left will be 25% keep a number of slides to show in even number.

[leonace924]

Hello, @leggomuhgreggo , how are you?

Do you have a clear solution for this one? Since I am using slick-carousel in react, I need this for sure Hope to get help from you Thank you