如何将箭头添加到Slick滑块

Question

我正在使用名为＆＃39; slick＆＃39;的jquery插件整理幻灯片演示文稿。 （http://kenwheeler.github.io/slick/）使用django和bootstrap 3模板。我有一个基本的旋转木马使用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;
}