CODEWITHSUNDEEP
jquerycssslidercarousel
Matt
Matt

Reputation: 77

Customise Slick.js

I'm trying to add some custom buttons to the Slick.js jQuery slider, in place of the dots that the plugin uses. I'm not great with jQuery so I don't know what code I could add to sync the slider with my buttons.

Upvotes: 0

Views: 3311

Answers (1)

Kristoffer Jälén
Kristoffer Jälén

Reputation: 4738

Just override the .slick-dots CSS class in slick.css.

.slick-dots li button:before {
    background: url(myButton.png);
    content: normal;
}

Or if you need to modify the dot content itself, do something like:

$('.slick-dots button').remove();
$('.slick-dots li:nth-child(1)').append('<div class="btn btn-slider">First</div>');
$('.slick-dots li:nth-child(2)').append('<div class="btn btn-slider">Second</div>');
$('.slick-dots li:nth-child(3)').append('<div class="btn btn-slider">Third</div>');

It seems to work, not very tested though. See jsFiddle.

Upvotes: 1

Related Questions