как добавить стрелки Slick слайдера

Question

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

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

мне интересно, если есть способ, чтобы добавить стрелки влево и вправо слайда, как в первом примере (Single Item) на http://kenwheeler.github.io/slick/. Я могу видеть только пред и следующие кнопки ниже слайдов

Answer 1

Ваших стрел уже есть, они находятся кнопки Предыдущей и Следующая в нижней части страницы. Вам нужно будет включить slick-theme.css или создать их самостоятельно через css.

Answer 2

Цвет кнопок в slick-theme.css белый, поэтому не отображается на белом фоне.

Изменение цвета кнопок там или перезаписать в вашем собственном листе стиле, как это:

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

Answer 3

Здесь я пытаюсь код 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%); 
    } 

ПРИМЕЧАНИЕ

Дайте их родительский класс

позиция: относительная

Также вы можете установить & влево вправо положение, как ваша потребность.