Slick-js 轮播在移动视图上的第一张和第二张幻灯片之间交替320 像素

如何解决Slick-js 轮播在移动视图上的第一张和第二张幻灯片之间交替320 像素

我在使用此轮播包时遇到了一些问题。我把这个配置字符串放在 data-slick 属性中，但我没有得到预期的行为。我希望在移动 320px 中，幻灯片一次显示一张，但似乎在前 2 张幻灯片之间交替，我总共有 8 张幻灯片。

data-slick="{"autoplay": true,"autoplaySpeed": 5000,"slidesToShow": 4,"slidesToScroll": 4,"speed": 400,"fade": false,"dots": true,"arrows": false,"responsive":[{"breakpoint": 1024,"settings": {"slidesToShow": 2}},{"breakpoint": 640,"settings": {"slidesToShow": 1 }},{"breakpoint": 300,"settings": {"slidesToShow": 1,"slidesToScroll": 1 }}]}"

Json prettified version but I'm not sure if I'm causing issues with any of the strings? 

{
  "autoplay": true,"responsive": [
    {
      "breakpoint": 1024,"settings": {
        "slidesToShow": 2
      }
    },{
      "breakpoint": 640,"settings": {
        "slidesToShow": 1
      }
    },{
      "breakpoint": 320,"settings": {
        "slidesToShow": 1,"slidesToScroll": 1
      }
    }
  ]
}