光滑的轮播下一个和上一个按钮显示在上方/下方，而不是向左/向右

Question

我正在使用 Slick Carousel这个和我的“下一个”和“上一个”箭头出现在我的图像上方和下方，而不是在每一侧。我只是在寻找它在 Slick 文档中的显示方式。

按钮不在 html 中，它们是由 slick js 生成的。

这是html：

<div class="albumsCarousel">
  <div><img class="slickImage" src=./images/betterQuit.png></div>
  <div><img class="slickImage" src=./images/betterVill.png></div>
  <div><img class="slickImage" src=./images/casio.jpg></div>
  <div><img class="slickImage" src=./images/betterWorried.png></div>
  <div><img class="slickImage" src=./images/betterFrost.png></div>
  <div><img class="slickImage" src=./images/betterWeird.png></div>
  <div><img class="slickImage" src=./images/betterOphelia.png></div>
  <div><img class="slickImage" src=./images/betterEnya.png></div>
  <div><img class="slickImage" src=./images/betterXiu.png></div>
  <div><img class="slickImage" src=./images/betterImpasse.png></div>
  <div><img class="slickImage" src=./images/betterV.png></div>
  <div><img class="slickImage" src=./images/betterThrone.png></div>
  <div><img class="slickImage" src=./images/betterSholi.png></div>
  <div><img class="slickImage" src=./images/betterPGirls2.png></div>
 </div>

这是 JS： $(document).ready(function(){

   $('.albumsCarousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
nextArrow: '<i class="fa fa-arrow-right"></i>',
prevArrow: '<i class="fa fa-arrow-left"></i>'
});

这是 CSS（我很确定它在这里不起作用）：

.slick-prev, .slick-next {
    transform: translate3d(0, 0, 0);/* fix for chrome not rendering */
   }
   .slick-dots {
   transform: translate3d(0, 0, 0);
    }

Answer 1

我对 slick 也有类似的问题；图片上方和下方的导航。但我用这个简单的 css 解决了它。

.nextArrowBtn{
    position: absolute;
    z-index: 1000;
    top: 50%;
    right: 0;
    color: #BFAFB2;
}
.prevArrowBtn{
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 0;
    color: #BFAFB2;
}

现在在您的灵活配置中，将上面的类添加到 prevArrow 和 nextArrow 属性。

$("#slick-images").slick({
    nextArrow: '<i class="icon fa-arrow-right nextArrowBtn"></i>',
    prevArrow: '<i class="icon fa-arrow-left prevArrowBtn"></i>'
});

您可以根据需要添加其他属性，也可以选择添加箭头样式以供选择。但是这个小 css 将箭头定位在图像中间的位置。我希望这可以帮助那里的人。干杯!