时间戳

首页 > 解决方案 > Slick Slider 跑到两条线上，树枝/木材

jquery - Slick Slider 跑到两条线上，树枝/木材

问题描述

我在使用光滑的滑块和树枝时遇到了问题（包括 foudnationpress）

我的滑块在第一个图像上显示正常，但在第二个滑块上它进入新行，而不是在它后面或滑入？

<div class="small-6 cell main-slider">
{% for slide in fields.qtr_block_column.slider_group.slide %}
    <div class="cell small-6 medium-6 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}}</h3>
                <h3>{{slide.title}}</h3>
                <p>{{slide.subtitle}}</p>
            </div>
        </div>
    </div>
{% endfor %}

这是我光滑的 jquery

  $('.main-slider').slick({
autoplay: true,
fade: true,
arrows: false,
slidesPerRow: 1,
rows: 1,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,

});

这里还有css：

.qtr-block{
    padding: 25px;
    background-color: $mid-gray;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    text-align: center;
    .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: visible;
}

任何帮助将不胜感激

标签： jquerytwigzurb-foundationslick

解决方案

通过包含光滑的 css 文件来修复它，

推荐阅读