使js滑块响应

Question

我正在工作的网站中有一个滑块小部件，有人提醒我注意该小部件在移动设备上打开网站时看起来很有趣。

我的小部件在这里：How to extract the decision rules from scikit-learn decision-tree? 它使用jQuery 3.3.1。

问题是在较小的屏幕尺寸上显示时，滑块的宽度无法调整。滑块的宽度当前是这样计算的：

  var slideCount = jQuery('#slider ul li').length;
  var slideWidth = jQuery('#slider ul li').width();
  var slideHeight = jQuery('#slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

slider ul li的宽度在此处被硬编码为800px：

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  margin: auto;
  padding: 0;
  width: 800px;
  height: 400px;
  text-align: center;
  line-height: 30px;
}

我不太确定如何使滑块的宽度适应其容器的宽度。我一直在使用Chrome开发人员工具/设备模式进行测试，但到目前为止我没有尝试过。

感谢您的帮助！