jquery - 设置绝对位置

Question

我正在为 slider 使用 jQuery 插件。它一次显示 3 个元素，并向事件元素添加一个类 slick-active。

我只想将中间的元素显示为全宽，但只想显示第一个和最后一个元素的 50%，如下图所示:

为此，我试图将绝对位置设置为 50%，但它似乎不起作用。我无法弄清楚如何设置位置以获得上述结果。

这就是我正在尝试的:

.slick-active:first-child{
    position: absolute;
    left: -50%;
}

.slick-active:last-child{
    position: absolute;
    right: -50%;
}

演示: http://jsfiddle.net/yu76xt4f/

Answer 1

我添加了以下 CSS，我不推荐这样做。因为它在其中使用了 !important 。我正在使用 !important 来覆盖插件提供的内联样式。

CSS

.slick-slide.slick-active{
    width: 100px !important;
}

.slick-slide.slick-active + .slick-slide.slick-active{
    width: 400px !important;
}

.slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active{
    width: 100px !important;
}

Working Fiddle