Slick Slider显示文字按钮而非箭头图标问题求助

问题根源 #

箭头显示为"Previous"/"Next"文字、位置偏移的问题，核心原因有两个：

• 未引入Slick的主题样式文件slick-theme.css：默认的slick.css仅提供基础布局，箭头图标、定位等样式依赖主题文件
• 自定义的.box使用了grid布局，和Slick自动生成的轮播结构冲突，导致箭头位置错乱

修复步骤 #

1. 补充引入主题CSS
   在现有slick.css之后添加slick-theme.css，确保图标样式正常加载。
2. 移除冲突的自定义样式
   删除.box中的display: grid、grid-template-columns等布局属性，让Slick接管轮播的布局控制。
3. （可选）自定义箭头样式
   若需调整箭头位置或图标，可通过覆盖Slick的默认类实现。

修正后的代码示例 #

HTML部分 #

<head>
  <!-- Jquery CDN -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <!-- 先引入基础样式，再引入主题样式 -->
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
   <div class="box">
          <!-- 轮播项内容保持不变 -->
          <div class="vid-container bd-10-ut">
            <div class="vid-thumbail">
              <video width="100%">
                <source src="https://player.vimeo.com/external/433944538.sd.mp4?s=01521568a0488626d73b34243e27f74a789ea20b&profile_id=164&oauth2_token_id=57447761">
              </video>
            </div>
          </div>
          <!-- 其他轮播项重复内容省略 -->
   </div>
</body>

CSS部分 #

/* MAIN CONTIANER */
.main-container {
  padding: 50px;
}

/* 移除grid布局，保留必要间距 */
.box {
  margin: 0 auto;
  width: 90%;
}

.box img {
  border-radius: 2px;
}

.vid-container {
  text-align: center;
  border-radius: 12px;
  transition: all .3s linear;
  margin: 0 10px; /* 添加项间距，替代grid-gap */
}

.vid-container:hover {
  transition: all .3s linear;
  transform: scale(1.2);
  background: #111111;
  filter: drop-shadow(-2px 0px 4px #303030) drop-shadow(0px -2px 4px rgba(48, 48, 48, 0.05)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.vid-cntrls{
  padding-bottom:0.6rem ;
  padding-right:0.6rem ;
  padding-left:0.6rem ;
}

.vid-container:hover .vid-cntrls{
  opacity: 1 !important;
}

.vid-icon{
  cursor: pointer;
}

.vid-cntrls{
  opacity: 0 !important;
}

/* utilities CSS */
.d-flex-ut{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mt-top-ut{
  margin-top: 1.2rem;
}
.bdr-10-ut{
  border-radius: 10px;    
}
.mr-ut{
  margin-right: 12px;
}

/* 可选：自定义箭头位置 */
.slick-prev, .slick-next {
  z-index: 10;
}
.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}

JS部分 #

$(document).ready(function(){
  $('.box').slick({
    dots: false,
    infinite: false,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});

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