3

Each of my slides are different in width so the variableWidth parameter set to true is needed. The problem is that it shows as many slides that fits its container. I would rather display just one at a time. More like the width of the container adapt to its content.

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
        } 
    }]
});
Sandro
  • 467
  • 1
  • 5
  • 15
  • 1
    See this [answer](http://stackoverflow.com/questions/36172489/slick-carousel-centermode-without-excess-slides/36189091#36189091) and let me know how you get on. – Yass May 26 '16 at 21:10
  • Thanks! That worked fine! – Sandro May 27 '16 at 06:54

1 Answers1

0

Old topic, but I hope this helps someone looking for a solution about this.

In order to only show one slide at a time, you must set "variableWidth: false", and wrap every variableWidth slide with another div, like:

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

and so on, so slick makes the outer div full width, and the inner only takes the width it has.

clavellp
  • 1