圆盘传送带（下一个/上一个按钮的放置）

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。greenboxgoolu想要引起更多关注对此问题。

光滑轮播（下一个/上一个按钮的放置）

<div class="container">
    <div id="carousel" class="carousel">
        <div class="item red"></div>
        <div class="item orange"></div>
        <div class="item green"></div>
        <div class="item blue"></div>
    </div>
</div>

$('#carousel').slick({
    arrows: true,
    slidesToShow: 3
});

Link

一切正常，但我想问的是，我如何使“下一个上一个”按钮放置在框中而不是外部（请参见下面的示例）

我想要的是：按钮在图像上（如下面的示例所示）-完成+当用户将鼠标悬停时按钮具有不透明度

示例：

Answer 1

查看您的草图，添加以下CSS类：

.slick-prev {
  left: 10px;
  top: 180px;
  z-index: 1000;
}

.slick-next {
  right: 10px;
  top: 180px;
  z-index: 1000;
}

对于悬停时的不透明度，请添加：
.slick-prev:hover, .slick-next:hover {
  opacity: 0.5;
}

Answer 2

.container .slick-prev { left: 0; bottom: 0; top: auto; z-index: 100; }
.container .slick-next { right: 0; bottom: 0; top: auto; z-index: 100; }