如何将Slick轮播组件的‘Previous’和‘Next’按钮自定义为箭头

有两种常用方式可以实现需求，以下是具体步骤：

方法一：通过Slick初始化配置自定义箭头 #

直接在Slick的初始化参数中，使用prevArrow和nextArrow选项替换默认按钮，你可以用纯文本箭头、HTML实体或者图标字体来定义箭头样式。

修改后的JS代码 #

$('.horizontal').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 100,
  // 自定义上一页箭头
  prevArrow: '<button type="button" class="slick-prev">←</button>',
  // 自定义下一页箭头
  nextArrow: '<button type="button" class="slick-next">→</button>'
});

对应的CSS样式（美化箭头） #

#slider img {
  width: 350px;
  height: 350px;
  margin-right: 100px;
}

/* 自定义箭头样式 */
.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
}

.slick-prev {
  left: 20px;
}

.slick-next {
  right: 20px;
}

.slick-prev:hover, .slick-next:hover {
  background: rgba(0,0,0,0.8);
}

方法二：自定义箭头元素并绑定事件 #

如果需要更灵活的布局或样式，可以先隐藏默认按钮，然后手动添加箭头元素，再绑定点击事件触发轮播切换。

修改后的HTML代码 #

<section id="slider" style="background-color:#fefefe;height: 800px;">
  <!-- 自定义箭头 -->
  <button class="custom-prev">←</button>
  <button class="custom-next">→</button>
  
  <div class="horizontal">
    <img src="images/imags/1.jpg" class="before_after">
    <img src="images/imags/2.jpg" class="before_after">
    <img src="images/imags/3.jpg" class="before_after">
    <img src="images/imags/4.jpg" class="before_after">
    <img src="images/imags/5.jpg" class="before_after">
    <img src="images/imags/6.jpg" class="before_after">
    <img src="images/imags/8.jpg" class="before_after">
    <img src="images/imags/9.jpg" class="before_after">
    <img src="images/imags/10.jpg" class="before_after">
    <img src="images/imags/11.jpg" class="before_after">
    <img src="images/imags/12.jpg" class="before_after">
    <img src="images/imags/13.jpg" class="before_after">
    <img src="images/imags/14.jpg" class="before_after">
    <img src="images/imags/15.jpg" class="before_after">
    <img src="images/imags/16.jpg" class="before_after">
  </div>
</section>

修改后的JS代码 #

// 初始化轮播，隐藏默认箭头
$('.horizontal').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 100,
  arrows: false // 关闭默认箭头
});

// 绑定自定义箭头的点击事件
$('.custom-prev').click(function(){
  $('.horizontal').slick('slickPrev');
});

$('.custom-next').click(function(){
  $('.horizontal').slick('slickNext');
});

对应的CSS样式 #

#slider img {
  width: 350px;
  height: 350px;
  margin-right: 100px;
}

#slider {
  position: relative; /* 让自定义箭头相对于轮播容器定位 */
}

.custom-prev, .custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 10;
}

.custom-prev {
  left: 20px;
}

.custom-next {
  right: 20px;
}

.custom-prev:hover, .custom-next:hover {
  background: rgba(0,0,0,0.8);
}

两种方法都可以实现需求，你可以根据自己的样式需求选择。如果想用图标字体，只需要把箭头文本替换成对应的图标标签即可，比如<i class="fa-solid fa-chevron-left"></i>。

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