求助：修复Slick Slider轮播组件显示异常问题

安全阿岳

2026-7-21

Slick Slider轮播异常问题排查修复

我想要实现如图目标轮播效果所示的Slick Slider轮播效果，但实际呈现的是异常显示状态的异常状态。现附上编写的HTML、JavaScript及CSS代码，恳请协助排查并修复该问题。

HTML代码

<section id="header">
    <div class="black-line"></div>
    <div class="navigation-bar">
        <h2>CADAC</h2>
        <div class="nav-menu">
            <ul class="nav-menu-list">
                <li class="active-nav-bar"><a href="">HOME</a></li>
                <li class=""><a href="">PAGE</a></li>
                <li class=""><a href="">SERVICES</a></li>
                <li class=""><a href="">CONTACT US</a></li>
                <li class=""><a href="">REGISTRATION FORM</a></li>
                <li class=""><a href="">VERIFY CERTIFICATE</a></li>
            </ul>
            <i class="fa-solid fa-magnifying-glass"></i>
            <i class="fa-solid fa-bars"></i>
        </div>
    </div>
    <section class="img-slider">
        <div class="image-slider">
            <div class="slide-content">
                <i class="fa-solid fa-car"></i>
                <p>MOVING WITH US</p>
                <h1>Fast & Secure Courier<br>For Small & Big Packages</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
        <div class="image-slider slider-two">
            <div class="slide-content">
                <i class="fa-solid fa-bolt"></i>
                <p>MOVING WITH US</p>
                <h1>Super-fast and fuss-free<br>delivery sevice</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
        <div class="image-slider slider-three">
            <div class="slide-content">
                <i class="fa-solid fa-wallet"></i>
                <p>MOVING WITH US</p>
                <h1>Easy on-spot, card<br>payment methods</h1>
                <button class="normal">PURCHASE ME</button>
            </div>
        </div>
    </section>
</section>

JavaScript代码

$(document).ready(function () {
    $('.img-slider').slick({
        dots: false,
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        drag: true,
    });
});

CSS代码

#header {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.black-line {
  height: 65px;
  width: 100%;
  background-color: #333232;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-menu i {
  margin: 10px;
}

.navigation-bar {
  height: 100px;
  width: 85%;
  position: absolute;
  background-color: #ffffff;
  justify-content: space-between;
  padding: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 11%;
  cursor: pointer;
  box-shadow: 0 10px 15px #00000040;
}

.navigation-bar h2 {
  color: #333232;
  transition: 0.5s ease;
}

.navigation-bar h2:hover {
  color: #ffdc39;
}

.nav-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-menu-list li {
  list-style: none;
  padding: 20px;
  position: relative;
  background-color: #ffffff;
  transition: 0.3s ease;
}

.nav-menu-list li:hover {
  background-color: #ffdc39;
}

.nav-menu-list li.active-nav-bar {
  background-color: #ffdc39;
}    

.nav-menu-list li a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #333232;
}

.img-slider {
  position: relative;
  width: 100%;
  height: 90vh;
}

.img-slider .image-slider {
  background-image: url(Assets/colorful_cloud.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10%;
}    

.img-slider .slider-two {
  background-image: url(Assets/product_delivery.jpg);
}

.img-slider .slider-three {
  background-image: url(Assets/card_payment.jpg);
}

.image-slider .slide-content {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.image-slider .slide-content i {
  font-size: 100px;
  color: #ffdc39;
  margin: 10px;
}

.image-slider .slide-content p {
  font-size: 16px;
  color: #ffffff;
}

.image-slider .slide-content h1 {
  font-weight: 700;
  margin: 10px;
  text-align: center;
  margin-bottom: 30px;
}

.image-slider .slide-content button {
  margin-top: 20px;
}

问题排查与修复方案

核心问题分析

从代码和异常表现来看，主要是以下几个原因导致轮播失效：

缺失Slick依赖文件：Slick需要官方CSS、JS以及jQuery支持，你的代码只写了初始化逻辑，没引入必要依赖。
自定义样式冲突：.image-slider设置了width:100%，会和Slick的布局逻辑冲突，导致轮播项堆叠显示。
未设置溢出隐藏：轮播容器没有限制溢出，可能导致轮播项跑出可视区域。

修复步骤

引入必要依赖
在HTML的<head>中添加Slick的CSS和jQuery，在</body>结束前添加Slick的JS：

<!-- jQuery 依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Slick 基础样式 -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Slick 主题样式（可选，提供默认箭头/点样式） -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- Slick 核心脚本 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

调整CSS样式
修改.img-slider和.image-slider的样式，兼容Slick布局：

.img-slider {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden; /* 添加溢出隐藏，防止轮播项溢出 */
}

.img-slider .image-slider {
  background-image: url(Assets/colorful_cloud.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 移除width:100%，让Slick控制轮播项宽度 */
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10%;
}

确认加载顺序
确保依赖文件加载顺序正确：先加载jQuery，再加载Slick的JS，最后加载你的自定义初始化脚本。

验证效果

完成以上修改后，轮播应该会正常工作：

轮播项自动按顺序切换
箭头可手动控制前后切换
不会出现堆叠显示的异常状态

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

求助：修复Slick Slider轮播组件显示异常问题

HTML代码 #

JavaScript代码 #

CSS代码 #

问题排查与修复方案 #

核心问题分析 #

修复步骤 #

验证效果 #