Show instagram style dots in slick slider [closed]

Question

I'm using the slick slider to show a lot of slider items. I also need to use dots to show the position of the items. At the moment, there are a lot of dots and I want do show the dots like instagram does.

Here is what i mean:

There should always be max 6 dots visible. Starting with the first one on the left side.

Is there any way to adress the 4 dots in the middle? At the moment I could only adress the active dot with it's class slick-active. But I need the dots before and after the active dot.

Here is my actual slider code: https://codepen.io/cray_code/pen/ZrKpWY

Awed

Answer 1

You can use jquery's prev and next function to access the prevoius and next element.

I've updated your codepen example here: link

$('li.slick-active').prev().css('background-color', 'red');
$('li.slick-active').next().css('background-color', 'orange');

Markova

looks good, thanks! is there a way to add a class (active-prev and active-next) to the links instead of only the background-styles? – Awed

sure, you can use addClass: $('li.slick-active').prev().addClass('active-prev'); – Markova

great, thanks a lot! – Awed

have you managed to implement the instagram style dot navigation? If so could you update the codepen? cheers jan – Halie

have you solved to style it like Instagram? need the same style... can you update your Codepen? – Helios

Answer 2

I have developed Instagram Stick slider with jQuery. you can use in this link. https://github.com/SolvingMan/Instagram-Stick-Slider-jQuery

live Demo:

• https://140.82.58.117/tingshop/

• http://bullsrvr.com/slider/demo/

Treatment

even thought this may solve the issue, it would be nice to add some more explanation. – Allophane

The answer seems incorrect, I recently developed something like this, you can restrict this to as many dots as you like. I have done it for 5 dots, after that additional dots are not shown, but scroll when your main slides scroll. You can use the init and change events to accomplish this. slickSlider.on('init', function (event, slick) { slickSlider.on('beforeChange', function (event, slick) { Working example: codepen.io/swarad07/pen/xmzQKm This is very similar to how Instagram does it, with edge dots smaller in size. Check this question for more details – Subsonic

Check this question for more details #33123412 – Subsonic

How to do with react-slick in reactjs? – Unruly