旋转木马/幻灯片左右控制

时间:2017-06-01 06:06:39

标签: html css twitter-bootstrap carousel

我的django有幻灯片放映。我想把" .prev-btn"在左侧垂直在中间和" .next-btn"在中间垂直的右侧。我试过position:absolute, right: 10px;,但这不会对按钮产生任何影响。所以我想,如果也许你可以帮助我。这是工作图像显示.prev-btn和.next-btn不在正确的位置: https://jsfiddle.net/jozv4o29/3/ 感谢帮助!

2 个答案:

答案 0 :(得分:0)

我刚刚添加了以下代码,它运行正常。您可以绝对定位按钮以进行上一次和下一次导航。然后将其转换为50%。只是为了确保它正好在中心。

JSFIDDLE

.prev-btn, .next-btn {
    font-size: 40px;
    color: white;
    position: absolute;
    top: 50%;
    translate: transformY(-50%)
}
.prev-btn {
  left: 0;
}
.next-btn {
  right: 0;
}

答案 1 :(得分:0)

你需要相应地定位箭头,见下面的代码

.prev-btn, .next-btn {
    font-size: 40px;
    color: white;
    position: absolute;
    top: 45%;
}
.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

https://jsfiddle.net/jozv4o29/4/