Стрелки по бокам dots в slick слайдере?

Question

[a9105051396]

Как можно сделать что бы в slick слайдере стрелки были по бокам от точек?
Сделал стилями, но на странице несколько слайдеров, в которых разное количество слайдов. Соответственно для каждего слайдера прописывать отдельные стили не вариант.

Answer 1

[iBird Rose]

Ну самый простой способ - просто добавить эти кнопки после инициализации слайдера:

$('.slick-dots').prepend('<li><a class="prev-btn" href="#">Prev</a></li>');
$('.slick-dots').append('<li><a class="next-btn" href="#">Next</a></li>');

Comments

[a9105051396]

Добавить их так можно, но они ведь не переключают слайды.

[iBird Rose]

a9105051396, я ж пример скинул. все там переключает

[a9105051396]

iBird Rose, Первый раз не работало здесь. Сейчас страницу обновил и все ок. Спасибо.

[a9105051396]

Нашел один косяк в данном решении. При клике на dots неправильно переключает слайды. Например при клике на первую кнопку показывается второй слайд. На вторую третий. И так далее.

[iBird Rose]

a9105051396, ага. прикольный баг. ну костыльная правка - это вставлять prepend и append не li, а к примеру div. но это будет не валидной версткой. потому что дочерним элементом ul не может быть div.
ну я еще подумаю о нормальной правке. или мб еще кто подскажет

[a9105051396]

iBird Rose, решил другим способом. После слайдера создал div. В него засунул стрелки и dots.