Увеличить и переместить стрелки для гладкой слайдер

Question

Я собираю презентацию слайдов с помощью JQuery плагин называется «пятно» (http://kenwheeler.github.io/slick/), используя Джанго и шаблон начальной загрузки 3. У меня есть базовая карусель рабочей с помощью шаблона Джанго, который выглядит как:

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

В гладком-theme.css. Я попытался изменить высоту, но это соответствует вертикальному расположению стрелки на странице. Являются ли эти элементы похожими на то, что они контролируют положение и размер, или есть что-то еще для поиска?

Answer 1

Вам нужно будет использовать инструменты отладки, чтобы вы могли видеть, какой класс предназначен для позиционирования и размера стрелки. Когда вы очищаете класс, его легко переопределить.

Answer 2

Найти элемент через инструменты разработчика Google или инспектор, откуда появляются стрелки. Возьмите этот селектор и переопределите стили!

.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; 
}