放大并重新定位光滑滑块的箭头

Question

我正在使用一个名为'slick'（http://kenwheeler.github.io/slick/）的jquery插件，使用django和一个bootstrap 3模板组合幻灯片演示文稿。我有一个基本的旋转木马使用django模板，看起来像：

upstream

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

头脑中的CSS是：

 <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 -->

编辑：

按照您的指示我找到了：

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

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

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

Answer 1

您将需要使用debugg工具，这样您就可以看到为箭头定位和大小调用的类。当您确认该类时，它很容易覆盖它。

Answer 2

通过谷歌开发者工具或检查器找到箭头来自哪里的元素。抓住那个选择器并重新定义样式！

.slick-prev { 
    left: 100px; // download the themes actual stylesheet so you can style easier on your host
    top: 10px !important; // add important if you need to override 
    height: 6000px; // your custom
}

Answer 3

在slick-theme.css中有以下样式。编辑字体大小将改变按钮的大小。这是因为.slick-prev：before和.slick-next：before的内容设置在同一个文件中。

.slick-prev:before,
.slick-next:before
{
  font-family: 'slick';
  font-size: 40px;
  line-height: 1;

  opacity: .75;
  color: white;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}