Slick Slider移动端显示异常问题求助排查

我基于HTML和PHP搭建的网站，主轮播组件使用Slick Slider实现，桌面端显示无明显问题，但多数移动端设备中幻灯片出现错位，下一张幻灯片的图片会与当前幻灯片重叠。相关代码如下：

JavaScript 初始化代码 #

$(document).ready(function() {
  $('.customer-logos1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4500,
    arrows: false,
    dots: false,
    slidesToScroll: 1,
    autoplay: true,
    pauseOnHover: true,
    cssEase: 'linear',
  });
});

HTML + PHP 结构代码 #

<section>
  <div class="customer-logos1 slider" style="color:white;font-weight:400">
    <?php
    $sliderbanner=$this->product->selectsliderbanner();
    ?>
    <?php foreach($sliderbanner as $slide){?>
    <div class="slide" style="width:100%">
      <div class="row">
        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">
          <div style="background:#f7f7f7;height:100%;">
            <div class="tm-offer-content skewp1" style="text-align:center;padding-top:25%" id="siggl">
              <h4><?=$slide->title?></h4>
              <h6><?=$slide->description?></h6>
              <span class="badge badge-warning" style="background:#A07F3D;color:white;font-size: inherit;
                padding: 0.55em 0.8em;"> <?=$slide->offer?></span>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">
          <img src="<?php echo base_url()?>admin/uploads/about/<?=$slide->pimage1?>">
        </div>
        <div class="col-lg-4 col-12" style="width: 100%;margin: 0;padding: 0;">
          <img src="<?php echo base_url()?>admin/uploads/about/<?=$slide->pimage2?>">
        </div>
      </div>
    </div>
    <?php } ?>
  </div>
</section>

问题原因排查与解决方案 #

1. 清除重复配置项 #

JavaScript代码中重复定义了slidesToScroll和autoplay，冗余代码可能干扰Slick初始化逻辑，建议移除重复项：

$(document).ready(function() {
  $('.customer-logos1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4500,
    arrows: false,
    dots: false,
    pauseOnHover: true,
    cssEase: 'linear'
  });
});

2. 修复自定义宽度与栅格的冲突 #

• 你给.slide和内部Bootstrap列元素强行设置了width:100%，这会打破Slick的幻灯片宽度计算逻辑，导致移动端容器溢出、幻灯片重叠。
• 解决方案：移除.slide和列元素上的自定义width、margin、padding样式，让Slick和Bootstrap各自处理布局：

  <div class="slide">
    <div class="row">
      <div class="col-lg-4 col-12">
        ...
      </div>
      <div class="col-lg-4 col-12">
        ...
      </div>
      <div class="col-lg-4 col-12">
        ...
      </div>
    </div>
  </div>
  

3. 给图片添加响应式样式 #

移动端下图片未限制宽度，容易超出幻灯片容器，需添加以下CSS：

.customer-logos1 .slide img {
  width: 100%;
  height: auto;
  display: block;
}

4. 确保初始化时机正确 #

如果轮播内容是动态渲染的，可能需要等待DOM完全加载后再初始化Slick，可改用$(window).load()触发：

$(window).load(function() {
  $('.customer-logos1').slick({
    // 配置项
  });
});

5. 检查Slick CSS是否正确加载 #

通过浏览器开发者工具确认Slick的官方CSS文件已正常加载，缺失核心样式会直接导致布局混乱。

内容的提问来源于stack exchange，提问作者TBC