2015-04-02 3 views
3

Я хочу, чтобы стиль активных слайд, чтобы иметь оранжевую границу.Как создать стиль слайда slick.js с помощью jQuery?

enter image description here

Зная, что этот класс: slick-active и структура выглядит следующим образом:

<div class='slick-slide slick-active' ...> 

Я придумал это:

JQuery

$('div').find('.slick-active').css('border', 'orange 3px solid'); 

Я не мог заставить их отображать. Может кто-то помочь мне с этим ?

Update:

После исправления моей ошибки синтаксиса JQuery, я получил границу, чтобы показать, но это не то, что я намеренно хочу.

Результат, как сейчас:

enter image description here

Вот мой JSFiddle

+0

dot отсутствует до css –

+0

'$ ('div'). Find ('. Slick-active'). Css ('border', '3px solid orange');' –

+0

hmm ... dang it. Я очень близко. – ihue

ответ

2

У меня была точно такая же проблема, пока я не нашел: https://community.serif.com/forum/18904/how-do-i-add-the-slick-slider-to-webplus. У Мартина есть отличный ответ, который просто включает добавление некоторого css в класс .slick-center. Добавление вашей оранжевой границы под первым блоком кода должно работать!

.center .slick-center h3 { 
    -moz-transform:scale(1.08); 
    -ms-transform:scale(1.08); 
    -o-transform:scale(1.08); 
    -webkit-transform:scale(1.08); 
    color:#e67e22; 
    opacity:1; 
    transform:scale(1.08); 
} 
.center h3 { 
    opacity:0.8; 
    transition:all 300ms ease; 
} 
0

, так как я столкнулся с той же проблемой и для дальнейшего использования:

Я был в состоянии получить это сделать с помощью класса .slick-ток

Я поместил DIV вокруг него так что я могу Usw селектор #divID .slick-ток {}

пример:

#sliderPreviewBox .slick-current { 
padding-bottom: 5px; 
border-bottom: 2px solid #006ab2; 
color: blue; 
}