Slick滑块开启centerMode和variableWidth时跳变问题求助

I’ve run into this exact problem before when combining centerMode and variableWidth in Slick— the jump happens because the slider’s default width calculation gets confused when you set a fixed slidesToShow alongside variable slide widths. Here’s how to fix it step by step:

Step 1: Style Slides with CSS #

Slick automatically adds a slick-center class to the active center slide, so we can use that to set our desired widths without extra JavaScript:

/* Base style for all non-center slides */
.slick-slide {
  width: 80px;
  box-sizing: border-box; /* Critical: ensures padding/border don’t break set width */
  min-height: 100px; /* Add minimum height for visibility */
  background: #f0f0f0;
  border: 1px solid #ddd;
}

/* Style for the centered slide */
.slick-slide.slick-center {
  width: 160px;
  background: #ddd;
}

Step 2: Adjust Slick Configuration #

Remove the slidesToShow parameter (it’s ignored when variableWidth: true anyway) and tweak centerPadding to balance your layout:

$('#timeline').slick({ 
  centerMode: true, 
  centerPadding: '80px', /* Adjust this value to match your desired side spacing */
  variableWidth: true, 
  arrows: false,
  /* Optional: Fix layout shifts on window resize */
  responsive: [
    {
      breakpoint: Infinity,
      settings: {
        variableWidth: true,
        centerMode: true
      }
    }
  ]
});

/* Trigger resize after initialization to fix initial layout calculation */
$(window).trigger('resize');

Why This Fixes the Jump #

• Removing slidesToShow: When variableWidth is enabled, Slick doesn’t use this parameter, but keeping it forces the slider to miscalculate the visible area, causing jumps during transitions.
• Using slick-center class: This built-in class reliably targets the active center slide without custom logic, ensuring consistent width sizing.
• box-sizing: border-box: Prevents padding or borders from adding to the set width, which would throw off the slider’s layout calculations.
• Resize trigger: Sometimes Slick’s initial width calculation is off—triggering a resize forces it to re-calculate dimensions correctly.

After these changes, your slider should transition smoothly, with the center slide staying consistently twice as wide as the others.

内容的提问来源于stack exchange，提问作者Marek123