How can I tweak the dots behavior of slick.js ?

Question

Situation

On the right side of my UI, I have 3 divs and they're slidable. I use slick.js to achieve this. I really like it. I want to solve this and still maintenance to continue using it.

Slick Settings (JS)

$('.slide').slick({

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

});

Dots

The dots are represent to the state of my div. As the start, the first dot will be highlight in black. If I click on the right arrow once, the position of the dot will move to the right one position as well, so on and so forth...

Now

I want to replace the dots UI, and give a selected/current div an orange border instead.

Goal

This is what I am trying to archive: I want my orange line to behave as a dot, and hightlight the first div initially, and so on ...

What is the most elegant way to accomplish something like that ? I'm hoping for someone at least point me to the right direction.

Here is how I create my UI : Fiddle

Answer 1

Using F12 to look at slick.js's configuration, I see that there is a class called .slick-active that is used to denote which slide/dot is active. The slide itself is in a div and the dot is in an li.

It looks like this,

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

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

To modify the active dot, you will want to select it with,

li.slick-active {}

To modify the dots container, you select it with,

ul.slick-dots {}

To modify the slide, you select with,

div.slick-active {}

For example, in your css file create the following selector to get an orange border around the slide (note that this works because the slide has a 10px margin, giving the effect of a border from the background-color),

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

and to hide the dots, add this to your css file (note this will hide all of the li dots within the parent ul),

ul.slick-dots {
    display:none;
}

Here is the jsfiddle for the fix: http://jsfiddle.net/va5qkycp/8/

and the CSS that was added,

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

The most important selector is div.slick-active ~ div.slick-active. It is a work-around that is used in place of not having a selector like :first-of-class. To read more see this SO answer CSS3 selector :first-of-type with class name?