Question

我正在实施Ken Wheeler的光滑旋转木马，并且在设计中心项目时遇到一些麻烦。

在centerMode的演示中：在他的网站上为true，中心磁贴比其他磁贴大。

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

我的HTMl看起来像这样：

TemplateSyntaxError at /

'my_tags' is not a registered tag library. Must be one of:
admin_list
admin_modify
admin_static
admin_urls
cache
i18n
l10n
log
static
staticfiles
tz

我正在处理div中存在的图像。这是我的CSS：

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

最后，我的光滑启动脚本看起来像这样：

.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;
}

看起来还没有应用centerPadding - 这就是为什么我手动添加样式来增长中心区域。

总结：我实际遇到的唯一问题是，当我应用样式来增长中心区块时，旋转木马的动画是跳动的。

我正在使用jQuery 3.1.1以及jquery-migrate。旋转木马所需的所有样式也都是进口的。

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

Answer 1

解决了它。我用了

 transform: scale(1.08);

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

这是希望将来有人遇到同样的问题并找到这个帖子。

Answer 2

你可以用css做到这一点

 .slider img{
           margin: 0 auto;
        }

光滑轮播中心模式的问题 - 成长中心项目

2 个答案: