jquery - 放大和重新定位光滑 slider 的箭头

Question

我正在使用名为“slick”(http://kenwheeler.github.io/slick/)的 jquery 插件使用 django 和 bootstrap 3 模板制作幻灯片演示文稿。我有一个使用 django 模板工作的基本轮播，如下所示:

 <div class="intro-header">  
    <div class="container">


        <div class="your-class">
            <div><IMG img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>
            <div><IMG width="100%" src="{% static 'img/slides/1.jpg' %}"></div>
          </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.intro-header -->

我想知道是否有办法放大箭头，甚至将它们移动到每张幻灯片的左右边缘。

头部的 CSS 是:

<style>
.slick-prev:before, .slick-next:before {
    color:red !important;

}
.your-class{
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3%;
}
</style>

编辑:

按照您的指示，我发现:

.slick-prev, .slick-next {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0px;
height: 40px;
line-height: 0;
margin-top: -10px;
outline: medium none;
padding: 0;
position: absolute;
top: 50%;
width: 20px;
}

在 slick-theme.css 中。我尝试更改高度，但这对应于页面上箭头的垂直定位。这些元素看起来像是在控制位置和大小，还是有其他需要寻找的东西？

Answer 1

您将需要使用调试工具，以便您能够看到为箭头定位和大小调用了哪个类。当您累积该类时，很容易覆盖它。