光滑的滑块项目不在移动设备上居中答案

【问题标题】：Slick slider item is not centered on mobile device光滑的滑块项目不在移动设备上居中
【发布时间】：2020-07-13 06:19:18
【问题描述】：

在移动设备上，这些项目是这样显示的。但是，我希望第一项居中。有什么问题？

精巧的代码：

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);，但这也未能解决问题。

【问题讨论】：

标签： javascript vue.js slick.js

【解决方案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
               },
            },
         ],
     };
  },

【讨论】：

还是不行。我的滑块宽度相同。