jquery - 仅显示一张带有 variableWidth 参数的幻灯片 slickslider

Question

我的每张幻灯片的宽度都不同，因此需要将 variableWidth 参数设置为 true。问题是它显示了适合其容器的尽可能多的幻灯片。我宁愿一次只显示一个。更像是容器的宽度适应其内容。

http://jsfiddle.net/fmo50w7n/401

HTML:

<section class="slider">
    <div style="width:200px;height:200px">slide1</div>
    <div style="width:500px;height:300px;">slide2</div>
    <div style="width:300px;height:100px;">slide3</div>
    <div style="width:500px;height:500px;">slide4</div>
    <div style="width:500px;height:300px">slide5</div>
    <div style="width:500px;height:400px">slide6</div>
</section>

CSS:

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}


.slick-slide:nth-child(odd) {
     background: $c2;
}

JS:

$(".slider").slick({
    autoplay: true,
    dots: true,
    variableWidth:true,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});

Answer 1

老话题了，但我希望这对正在寻找解决方案的人有所帮助。

为了一次只显示一张幻灯片，您必须设置“variableWidth: false”，并用另一个 div 包裹每张 variableWidth 幻灯片，例如:

<div><div style="width:200px;"></div> <div><div style="width:500px;"></div>

依此类推，so slick 使外部 div 全宽，而内部仅占用它的宽度。