Slick Slider配合Twig/Timber使用时第二张幻灯片换行问题排查

1. 修复CSS配置 #

核心问题为Slick父容器未隐藏溢出内容，同时滑块项的栅格类宽度和配置冲突：

.qtr-block{
    padding: 25px;
    background-color: $mid-gray;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    text-align: center;
    width: 100%; /* 新增，保证滑块占满容器宽度 */
    .container{
        padding-top: 25px;
        padding-bottom: 25px;
    }
    h3{
        color: $white;
    }
    img{
        border-radius: 50%;
        padding-bottom: 25px;
    }
    .stat-slider{
        color: $white;
        h1{
            font-size: 100px;
            margin-bottom: 25px;
            margin-top: 25px;
        }
    }
}
.main-slider{
    max-width: 100vw;
    width: 100%;
    position: relative;
    overflow: hidden; /* 替换原有visible，隐藏超出视口的非激活滑块 */
}

2. 优化Slick初始化参数 #

移除多行滑块专用的冗余参数，避免布局计算错误：

$('.main-slider').slick({
    autoplay: true,
    fade: true,
    arrows: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    cssEase: 'linear' // 新增，保证淡入过渡效果流畅
});

3. 修正Twig模板 #

修复标签闭合错误，移除和Slick配置冲突的栅格类：

<div class="small-6 cell main-slider">
{% for slide in fields.qtr_block_column.slider_group.slide %}
    <div class="qtr-block slider-sq" style="background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.413)),url('{{slide.image.url|resize(500)}}')">
        <div class="stat-slider">
            <div class="container">
                <h1>{{slide.number}}</h1>
                <h3>{{slide.title}}</h3>
                <p>{{slide.subtitle}}</p>
            </div>
        </div>
    </div>
{% endfor %}
</div>

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