Javascript 滑动转盘中心模式的问题-不断增长的中心项目

我正在执行Ken Wheeler的圆滑旋转木马，在设计中心项目时遇到了一些问题

在centerMode的演示中：在他的站点上，中心磁贴比其他磁贴大

我也希望以这种方式实现它，但当我对中心项目应用自定义样式以增加其大小时，旋转木马的动画变得非常跳跃和不稳定

我的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>

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

最后，我的灵巧入门脚本如下所示：

<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>

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

看起来还没有应用centerPadding-这就是为什么我要手动添加样式以增加中心平铺

总而言之：我实际遇到的唯一问题是，当我应用用于增长中心平铺的样式时，旋转木马的动画是跳跃的

我正在使用jQuery3.1.1以及jQueryMigrate。还将导入旋转木马所需的所有样式

jsfiddle:

解决了它。我曾经

 transform: scale(1.08); 

向上缩放中心项目，而不是使用像素宽度调整其大小

---

希望将来有人遇到同样的问题并找到这条线索

您可以使用css来实现这一点

 .slider img{
           margin: 0 auto;
        }

---

你好，Zenith，你能分享一个JSFIDLE或者你的开发网站吗？对不起，忘了打开一个。干得好