垂直光滑的旋轉木馬箭頭

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;
}

在這里工作小提琴 。

Answer 2

使用arrows: false 。 例如，這就是我編寫JavaScript代碼以擺脫Slick carousel默認提供的左右箭頭的方法：

$('#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">

結果：