时间戳

首页 > 解决方案 > Slick slider starting with a left offset

javascript - Slick slider starting with a left offset

问题描述

I am working on a template which is bootstrap based. I need to set up a full width slick slider, but its initial state should start at the left edge of the content container, and then progressively slider further left.

I tried to represent what needs to happen on the image below. The black border represent the viewport, the red border represent the content container. The first row is the initial state, the other 2 rows show the position of the slider after clicking the "prev" arrow:

enter image description here

Is this possible? And if so, how?

Thanks,

标签： javascriptcssslick.js

解决方案

Lol, I just had to do that same thing last week. I set slidesToShow:1 and slidesToScroll:1. I also have variableWidth:false, though I'm not sure if that played into it.

The next step is to set a width on your slides in CSS to keep them from resizing out to fill the space:

JS

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: false
}

CSS

/*Just to make it not full width, for this example*/
.slider{
    width:800px;
    margin:0 auto;
}

/*Edit, forgot this important bit.  This keeps the other slides visible*/
.slick-list {
    overflow: visible;
}

.your_slide {
    width: 280px!important;
    height: 345px!important;
}

推荐阅读