javascript - Slick carousel centerMode 的问题 - 不断增长的中心元素

Question

我正在实现 Ken Wheeler 的漂亮旋转木马，但在设计中心项的样式时遇到了一些问题。

在他网站上的 centerMode:true 演示中，中心图 block 比其他图 block 大。

我也想以这种方式实现它，但是当我将自定义样式应用于中心元素以增加其大小时，轮播的动画变得非常跳跃和不稳定。

我的 HTML 看起来像这样:

<div class="main-carousel">
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image">
        </div>
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image">
        </div>
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image">
        </div>
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image">
        </div>
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image">
        </div>
        <div class="tile-container">
            <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image">
        </div>
    </div>

我正在处理包含在 div 中的图像。这是我的 CSS:

.slick-current img{
  width: 350px !important;
  padding-top: 0px !important;
}

.tile-container img{
  width: 284px;
}

.tile-container img{
  padding-top: 20px ;
}

.tile-container{
  padding: 5px;
}

最后，我巧妙的启动脚本如下所示:

$('.main-carousel').slick({
     centerMode:true,
     centerPadding: '80px',
     slidesToShow: 4,
     slidesToScroll: 1,
     infinite: true,
     variableWidth: true,
     variableHeight: true
 });

它看起来也没有应用 centerPadding - 这就是为什么我要手动添加样式来增加中心图 block 。

总结:我实际遇到的唯一问题是，当我应用样式来增加中心图 block 时，轮播的动画会跳动。

我正在使用 jQuery 3.1.1 以及 jquery-migrate。还导入了轮播所需的所有样式。

jsfiddle:https://jsfiddle.net/b3cfooz5/

Answer 1

解决了。我用过

 transform: scale(1.08); 

放大中心元素而不是使用像素宽度调整它的大小。

希望将来有人遇到同样的问题并找到此线程。