Jquery 设置绝对位置

我正在为滑块使用jQuery插件。它一次显示3个项目，并向活动项目添加一个类

slick active

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

为此，我试图将绝对位置设置为50%，但似乎不起作用。我不知道如何设置位置以获得上述结果

这就是我正在尝试的：

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

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

演示：

---

我添加了以下CSS，我不推荐使用。因为它正在使用

！重要信息

。我正在使用

！重要信息

覆盖插件提供的内联样式

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;
}

试试这个， 使用位置：相对而不是绝对。并提供固定值而不是百分比

.slick-active:first-child{
    position: relative;
    left: -50px;
}

.slick-active:last-child{
       position: relative;
       left: -50px;
}

.slick-active {
     position: relative;
     left: -50px;
}

---

不能使用“宽度”属性而不是左和右吗。分别指定25%、50%和25%的宽度。@NishanSenevirathna我只想显示实际图像大小的50%，这样50%就被截断了。我想user1355300只想显示原始图像的50%。但如果您提供的宽度为100px，则会减少原始宽度。@NishanSenevirathna则可以使用

25%

、

50%

和

25%

。。我会在有时间的时候更新。