垂直光滑的轮播箭头答案

【问题标题】：Vertical slick carousel arrows垂直光滑的轮播箭头
【发布时间】：2023-03-19 14:58:01
【问题描述】：

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

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

我只想显示 nextArrow。目前，箭头位于轮播右侧（默认情况下）。我希望它位于旋转木马的底部。有什么办法可以用 CSS 实现这一点？

【问题讨论】：

你试过这样jsfiddle.net/devpull/q827wb0a
@UdhayTitus 轮播已经在垂直滚动了……只是箭头
prevArrow 是 string (html|jQuery selector) 不是布尔类型
@Jason 你有什么小提琴..???

标签： javascript css carousel

【解决方案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。

【讨论】：

【解决方案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">

结果：

【讨论】：