Javascript 平滑滑块响应断点宽度不工作

我已经用slick slider创建了slider。我遇到的问题是，使用断点进行联机工作的宽度很好

但是，当我以正常方式编写时，相同的代码不起作用。有人能帮我吗。从inspect和see中检查是否存在正常和在线代码

let slider=$（“.slider”）；
slider.not（'.slick已初始化'）.slick({
自动播放：错误，
无限：是的，
垂直：假，
点：是的，
箭头：是的，
幻灯片放映：1，
幻灯片滚动：1，
customPaging:函数（滑块，i）{}，
响应：[{
断点：1024，
设置：{
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
垂直：假，
},
}, {
断点：600，
设置：{
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
垂直：假，
},
}, {
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
垂直：假，
},
}]
});
。幻灯片img{
文本对齐：居中；
高度：150像素；
宽度：自动；
}
.主标题{
字号：18px；
线高：24px；
边缘底部：12px；
}
.说明{
字体大小：12px；
线高：18px；
边缘底部：18px；
}
.了解更多{
字体大小：14px；
字体大小：粗体；
颜色：#fff；
线高：20px；
文字装饰：无；
}
.了解更多：专注{
大纲：无；
}
.了解更多img{
显示：内联块；
左边距：8px；
边缘底部：-2px；
宽度：14px；
高度：14px！重要；
}
.text xs中心{
文本对齐：居中！重要；
填充：40px 15px！重要；
}
.滑块{
宽度：自动；
利润率：30像素；
}
.滑杆.滑杆{
背景：#292e3e；
颜色：白色；
填充：40px0；
字体大小：30px；
字体系列：“Arial”、“Helvetica”；
文本对齐：居中；
}
滑头，滑头，滑头，滑头，
.滑球.滑球下一步：前{
颜色：#292e3e；
}
.滑块.光滑滑块：第n个子项（奇数）{
背景：#57C09F；
}
.滑溜式img{
显示：初始！重要；
}
.圆点李{
显示：内联块；
宽度：6px！重要；
高度：6px！重要；
背景:#中交;；
-webkit过渡：所有0.5s；
过渡：均为0.5s；
-webkit边界半径：50%；
边界半径：50%；
边际：0.6px；
光标：指针；
位置：相对位置；
}
.圆滑的圆点李.圆滑的-活跃的{
背景：26d400；
宽度：31px！重要；
高度：6px！重要；
边界半径：4px；
边界：无；
}

标题1
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
标题2
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
标题3
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
标题4
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
标题5
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
标题6
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
将所有断点的箭头值从false切换为true，它应该可以工作，就像对我工作一样。或复制代码：

let slider = $(".slider");

slider.not('.slick-initialized').slick({
  autoplay: false,
  infinite: true,
  vertical: false,
  dots: true,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  customPaging: function(slider, i) {},
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }, {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      vertical: false,
    },
  }]
});

在CSS中更改旋转木马（图像滑块）的宽度：

我希望有帮助
 我也有同样的问题。经过一点调试，我发现HTML中的大小大于屏幕宽度。将以下行添加到标题部分修复了我的问题：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">


No它在计算机本地文件中的非标准html文件中工作。但它在codepen和JDFiddle中工作。我的意思是，codepen中的宽度根据屏幕大小正确取值，但在local中，它采用的是桌面宽度大小。是的，它采用的是整个桌面宽度，因为它应该这样做。如果您希望旋转木马（图像滑块）的大小小于屏幕的全宽，则可以自行设置宽度。请参阅更新的答案。
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">