javascript - 光滑的 slider 项目未在移动设备上居中

Question

在移动设备上，项目的显示方式如下。但是，我希望第一个项目居中。有什么问题吗？

流畅的代码:

slickOptions() {
    return {
       rows: 0,
       infinite: true,
       slidesToShow: 4,
       slidesToScroll: 4,
       responsive: [
           {
             breakpoint: 1301,
             variableWidth: true,
             settings: {
               slidesToShow: 4,
               slidesToScroll: 4,
               },
             },
             {
               breakpoint: 641,
               variableWidth: true,
               settings: {
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 initialSlide: 1
               },
            },
         ],
     };
},

我尝试过使用 initialSlide，但不起作用。

我还尝试添加 CSS:transform:transform3d(0, 0, 0);，但这也未能解决问题。

Answer 1

如果您要使用variableWidth: true，添加centerMode: true可能会更好。这应该确保您当前的幻灯片位于幻灯片的中心。

此外，您的 variableWidth 值应在 settings 对象中设置。请注意，只有当您的幻灯片实际上具有不同的宽度时，您才需要此设置。

  slickOptions() {
    return {
       rows: 0,
       infinite: true,
       slidesToShow: 4,
       slidesToScroll: 4,
       responsive: [
           {
             breakpoint: 1301,
             settings: {
               slidesToShow: 4,
               slidesToScroll: 4,
               variableWidth: true,
               centerMode: true
               },
             },
             {
               breakpoint: 641,
               settings: {
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 initialSlide: 1,
                 variableWidth: true,
                 centerMode: true
               },
            },
         ],
     };
  },