I have a slick slider with centerMode true and variableWidth: true.

The center slide needs to be 2x bigger than the other slides.
All slides have a width of 80px but the center need to have 160px.

here's a fiddle and code of my problem (jsfiddle messed it up but you can see the "jump"):

$('#timeline').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 5,
      variableWidth: true,
      arrows:false
});

/

I'll post more code if needed. Any solutions to that?

I have a slick slider with centerMode true and variableWidth: true.

The center slide needs to be 2x bigger than the other slides.
All slides have a width of 80px but the center need to have 160px.

here's a fiddle and code of my problem (jsfiddle messed it up but you can see the "jump"):

$('#timeline').slick({
      centerMode: true,
      centerPadding: '60px',
      slidesToShow: 5,
      variableWidth: true,
      arrows:false
});

https://jsfiddle/xf365usn/15/

I'll post more code if needed. Any solutions to that?

• javascript
• jquery
• slick.js

• I see all the slides as circles with the same size. The problem is the size or the jump from the overlapping? – muecas Commented May 13, 2018 at 19:43
• the circles have all 80 bersides the center one, this one should have 160...jsfiddle messed it up – Marek123 Commented May 13, 2018 at 19:49
• And the jump is the jump the slides made when overlapping? – muecas Commented May 13, 2018 at 19:59
• no... when you have different widths.... see the fiddle.. it jumps there... – Marek123 Commented May 13, 2018 at 20:54
• 1 I think i need to change that fiddle. All the slides are the same size and overlapped. Ill try my best to help you. – muecas Commented May 13, 2018 at 21:18

2 Answers 2

I resolved this issue with a fixed width on all slide with

.slick-slide { width:200px; }  

and variableWidth: true
I also left centerMode on true and edited the slick-active slide to get the desired results.

If you give the .slick-track some CSS animation transition it works well..slick-track { transition: all 0.3s ease; }