Question

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

这些按钮不在html中，它们是由光滑的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： $（文件）。就绪（函数（）{

   $('.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

你可以从选项中删除下一个和上一个箭头并尝试一下。你也可以在这里查看工作代码。

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

CSS

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

JS

$(".single-item").slick({
    dots: true,
  infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
});

工作代码检查

https://jsfiddle.net/v8xbo5sz/

尝试此工作

$(".single-item").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
 });

Answer 2

我有一个类似的浮油问题;图像上方和下方的导航。但我用这个简单的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将箭头定位在图像中间的正确位置。我希望这可以帮助那里的人。干杯！

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

2 个答案: