如何向滑動條添加箭頭

Question

我正在使用django和bootstrap 3模板，使用名為'slick'（ http://kenwheeler.github.io/slick/ ）的jquery插件整理幻燈片演示文稿。 我有一個使用django模板的基本輪播，該模板如下所示：

  <div class="your-class">
    <div>your content</div>
    <div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>


    <div>your content</div>
  </div>

我在http://jsfiddle.net/kc11/20a90mdm/1/

我想知道是否有一種方法可以像在http://kenwheeler.github.io/slick/上的第一個示例（單個項目）中那樣在幻燈片的左側和右側添加箭頭。 我只能看到幻燈片下方的上一個和下一個按鈕

Answer 1

您的箭頭已經在那里，它們是頁面底部的“上一個”和“ 下一個”按鈕。 您需要包括slick-theme.css或通過CSS自己設置樣式。

Answer 2

在這里我嘗試CSS代碼...

    .slick-prev{
    background:#000;
    width:50px;
    height:50px;
    position:absolute;
    left:0;
    top:50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Safari */
    transform: translateY(-50%);
    }
.slick-next{
    background:#000;
    width:50px;
    height:50px;
    position:absolute;
    right:0;
    top:50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Safari */
    transform: translateY(-50%);
    }

注意

給他們的父母班

位置：相對

您也可以根據需要設置左右位置。

Answer 3

slick-theme.css中按鈕的顏色為白色，因此在白色背景上不可見。

更改按鈕的顏色或在您自己的樣式表中覆蓋如下：

.slick-prev:before, .slick-next:before {
    color: #000000;
}