Как я могу настроить поведение точек slick.js?

Question

Ситуация

На правой стороне моего UI, у меня есть 3 дивы, и они с возможностью скольжения. Я использую slick.js для этого. Мне это очень нравится. Я хочу решить это и все еще обслуживание, чтобы продолжать использовать его.

Slick Настройка (JS)

$('.slide').slick({ 

    slidesToShow: 3, 
    slidesToScroll: 1, 
    arrows: true, 
    infinite: false, 
    swipe: true, 
    focusOnSelect:true, 
    dots:true, 

}); 

Dots

Точка представляет в состоянии моих дел. В качестве начала первая точка будет выделяться черным цветом. Если я нажимаю на стрелку вправо один раз, положение точки переместится на одну позицию вправо, а также, так далее и так далее ...

Теперь

Я хочу, чтобы заменить точки UI и дать выбранным/текущим div a оранжевый вместо границы.

Гол

Это то, что я пытаюсь архив: Я хочу, чтобы моя оранжевая линия ведет себя как точка, и первый отметку в поле DIV изначально, и так далее ...

Что является самым элегантным способом добиться чего-то подобного? Я надеюсь, что кто-то по крайней мере укажет меня в правильном направлении.

Вот как я создаю мой интерфейс: Fiddle

Answer 1

Использование F12, чтобы посмотреть на конфигурацию slick.js, я вижу, что есть класс, называемый .slick-активный, который используется для обозначения, которые скользят/точка активна , Сам слайд находится в div, а точка находится в ли.

Похоже, что это,

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

<ul class='slick-dots'> 
    <li class='slick-active'> 
</ul> 

Чтобы изменить активную точку, вы хотите, чтобы выбрать его,

li.slick-active {} 

Чтобы изменить контейнер многоточия, вы выбираете его,

Для изменения слайда вы можете выбрать:

Например, в вашем файле css создайте следующий селектор, чтобы получить оранжевую рамку вокруг слайда (обратите внимание, что это работает, потому что слайд имеет маркер 10 пикселей, что дает эффект границы от фонового цвета),

div.slick-active { 
    background-color:orange; 
} 

и скрыть точки, добавьте в файл CSS (обратите внимание, это скроет все литиево точек в пределах родительского ул),

ul.slick-dots { 
    display:none; 
} 

Вот jsfiddle для исправления: http://jsfiddle.net/va5qkycp/8/

и CSS, который был добавлен,

div.slick-active { border:3px solid orange; } 
div.slick-active ~ div.slick-active { border: 0; } 
div.slick-slide { padding:0; margin:5px; } 
div.slick-slide .tl-box { width:auto; } 

Наиболее важным селектор является div.slick-активных ~ div.slick-активные. Это рабочий процесс, который используется вместо того, чтобы иметь селектор типа: первый в своем классе. Чтобы узнать больше, см. Этот ответ SO CSS3 selector :first-of-type with class name?