如何在Slick轮播中添加箭头

Question

我正在使用一款名为“Slick”（http://kenwheeler.github.io/slick/）的jQuery插件，结合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/中的第一个示例（Single Item）那样，在幻灯片左右添加箭头。我只能看到幻灯片下方的prev和next按钮。请帮我看一下。

- user1592380

Answer 1

在这里，我尝试编写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%);
    }

注意

给他们的父级元素设置

position:relative

此外，您可以根据需要设置左右位置。

- Himanshu Vaghela

Answer 2

你的箭头已经在那里了，它们就是页面底部的“上一页”和“下一页”按钮。你需要包含 slick-theme.css 或通过 CSS 自己设置样式。

- brance

---

是的，它们在那里。你只需要为它们添加样式。 - zgood

好的，我已经包含了漂亮的主题以及bootstrap3（http://jsfiddle.net/kc11/20a90mdm/2/），但是我没有看到任何变化。 - user1592380

那是因为它没有被正确加载，我的意思是css文件。而且即使你加载了slick-theme.css，你仍然想用背景样式来设置.slick-prev和.slick-next类，比如background: url('images/prev_arrow.png'); - brance

嗨Brance，我不太懂CSS。为什么它没有正确加载？我在控制台中没有看到任何错误。 - user1592380

Answer 3

slick-theme.css 中按钮的颜色为白色，在白色背景上不可见。

可以在此更改按钮颜色，或者在自己的样式表中覆盖它：

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

- Raymundus