Кастомные стрелки в slick слайдер можно сделать на свой класс или айди?

Question

[Novamoscow]

Слайдер slick. Мне нужно изменить внешний вид стрелок и позиционирование. И это все на нескольких слайдерах на одной странице (на каждом слайдере что то меняется).

Я заверстал кнопку и задал ей класс. Можно ли заменить стандратные кнопки на мою кастомной.

PS Именно заменить на новый элемент, а не менять существующие стили в слике.

Answer 1

[Zbiten]

prevArrow: $('.prev'),
nextArrow: $('.next'),

Comments

[Jainashur]

Спасибо тебе!!!

[Mesuti]

Гениально!!

[andrey_kryltsov]

Спасибо большое за такой простой и эффективный способ)

[ohwoow]

Лучший, спасибо ))

Answer 2

[iBird Rose]

можешь вообще убрать стандартные arrows в slick и прописать эвенты этих кнопок (slickNext и slickPrev) на любой элемент который хочешь.
примерно так:

$('div').on('click', function() {
	$('slider').slick('slickNext');
});

Comments

[Novamoscow]

А как эти эвенты прописать ?

[Novamoscow]

Здорово! Спасибо! То что нужно!

[Oslar]

Novamoscow, Поддерживаю)

[karpos]

я попробовал у меня не получилось может , пояснит кто , slickNext заменится моим классом button-prev ?

[karpos]

$('button-prev').on('click', function() {
$('slider').slick('slickNext');
});

[Vitaly Max]

karpos,
$('button-prev').on('click', function() {
$('slider').slick('slickNext');
});

у тебя идет обращение к button-prev как к тегу, а такого тега нет..
напиши в скобках '.button-prev' это обращение к классу (точку добавь)

Answer 3

[igumenov]

prevArrow: '<div class="prev"></div>',
nextArrow: '<div class="next"></div>',

И потом через css править

Comments

[Novamoscow]

Они располагаются почему то не на стандартных местах( с лева и с права), а в низу и на верху. Как это можно поправить ?

[Ярослав Иванов]

Novamoscow: через CSS

[igumenov]

Да, теперь нужно через css разместить их правильно
.prev{
width:20px;
height: 20px;
position: absolute;
top: 50%;
left: 0px;
margin-top: -10px;
background: #f00;
}

аналогично и к второй стрелке

Answer 4

[Neyury]

В свойствах prevArrow, nextArrow можно указать свой html код для стрелок (а также DOM objects или Jquery селектор). Подробнее можно посмотреть на странице слайдера с описанием всех свойств и их примерами.

Answer 5

[ian14]

Если вы делаете свои кнопки навигации, которые хотите вывести в нужном вам месте, то используйте в настройках слайдера это

nextArrow: document.querySelector('#my-arrow-next'),
prevArrow: document.querySelector('#my-arrow-prev')