垂直光滑的旋转木马箭头

Question

我正在尝试制作一个垂直光滑的旋转木马，但我不知道如何使箭头垂直

$('.offer-page-carousel').slick({
    arrows: true,
    vertical: true,
    prevArrow: false,
    verticalSwiping: true,
});

我只希望显示nextArrow。目前箭头位于轮播的右侧（默认）。我希望它在旋转木马的底部。我可以通过CSS实现这一点吗？

Answer 1

这将垂直定位默认的光滑导航。如果按钮较大，则需要使用尺寸：

.slick-slider {
  margin-top: 60px;
}

.slick-prev, .slick-next {
  left: 50%;
  transform: translate(-50%, 0) rotate(90deg);
}
.slick-next {
  top: unset;
  bottom: -30px;
}
.slick-prev {
  top: -30px;
}

工作fiddle here。

Answer 2

使用arrows: false。例如，这就是我编写JavaScript代码的方式，以摆脱Slick轮播默认提供的左右箭头：

$('#slickcarousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 5000
});

然后，您可以构建自己的箭头并使用CSS设置其样式。这是我在JavaScript代码中指定箭头的方式：

$('.left').click(function(){
    $('#slickcarousel').slick('slickPrev');
});
$('.right').click(function(){
    $('#slickcarousel').slick('slickNext');
});

CSS代码：

#testimonials .left{cursor:pointer;margin:9px 0 16px 16px}
#testimonials .right{cursor:pointer;margin:9px 16px 24px 0;float:right}

按钮的HTML：

<img class="left" src="/img/arrowleft.png" width="32" height="31" alt="Arrow left button">
<img class="right" src="/img/arrowright.png" width="32" height="31" alt="Arrow right button">

结果：