Jquery 将静态滑块转换为响应滑块

我使用jQuery创建了自己的滑块，但它的长度是固定的。我想使用纯CSS方法使其具有响应性，因为我不想使用JavaScript/jQuery使所有元素都具有

style

属性。到目前为止，我有一个：

$（文档）.ready（函数（）{
$（“.items ul li”）。每个（函数（）{
$（“.items ul”）.width（$（.items ul”）.width（）+$（this.outerWidth（））；
如果（$（this）.height（）>$（“.items”）.height（））
$（“.items，.items ul”）.height（$（this.outerHeight（）+10）；
});
$（“.items ul”）.css（左），-$（.items ul li.current”）.prev（）.position（）.left）；
$（“.items ul li:first”）。单击（函数（）{
if（$（this）.hasClass（“当前”））
返回false；
left=$（this.position（）.left-3-$（this.outerWidth（）；
美元（“.items ul li”）.removeClass（“当前”，1200）；
$this=$（this）；
$（“.items ul”）.animate（{“left”：-left+5}，200，function（）{
$this.addClass（“当前”，1200）；
});
返回false；
});
$（“.items ul li”）。单击（函数（）{
if（$（this）.hasClass（“当前”））
返回false；
左=$（this.prev（）.position（）.left+3；
美元（“.items ul li”）.removeClass（“当前”，1200）；
$this=$（this）；
$（“.items ul”）.animate（{“left”：-left+5}，200，function（）{
$this.addClass（“当前”，1200）；
});
返回false；
});
});
*{font-family:Segoe-UI；行高：1；边距：0；填充：0；}
正文{字体大小：80%；}
.items{位置：相对；宽度：500px；溢出：隐藏；边距：自动；填充：15px；}
.items ul{位置：绝对；顶部：0；}
.items ul、.items ul li{margin:0；padding:0；列表样式：无；显示：块；溢出：隐藏；边框半径：5px；}
.items ul li{显示：块；宽度：150px；文本对齐：中心；浮动：左；边距：0 5px；边距顶部：40px；框阴影：0 0 5px#000；}
.项目ul li a，
.项目ul li a img，
.李强，
.items ul li span{显示：块；边距：5px 0；}
.items ul li a img{最大宽度：100%；}
.items ul li.current{宽度：200px；字体大小：1.2em；页边空白顶部：5px；}
.items ul li strong{字体大小：1.2em；}
.items ul li span{字体大小：1.1em；}
.项目ul li a：第一个孩子，
.items ul li a img{margin:0；}



标题1
副标题1


标题2
副标题2


标题3
副标题3


标题4
副标题4


标题5
副标题5


如果
.items
始终为全宽，则使用vw（如Clayton在评论中所建议的视口宽度）将获得纯css解决方案，尽管您需要注意跨浏览器测试


如果它只是相对于
.items
，我知道没有一种纯粹的css方法可以使一个孩子在没有绝对定位的情况下（这会破坏你的滑块效果）达到其父母的父母的宽度的%
/* Responsiveness: */
.items {width: 80vw;}
.items ul li {width: 25vw;}
.items ul li.current {width: 30vw;}
.items li img {width:100%;}