Как решить проблему с двумя слайдерами slick на странице?

Question

[Тёма Ти]

Друзья, на странице имеется два slick-слайдера (jsfiddle.net/k2cvouwq/1). Оба управляются одними и теми же файлами: slick.css и slick.min.js, которые я подключил в head. Задавать скорость перелистывания, параметры автоперелистывания и кол-во показываемых слайдов я могу посредством jQuery для каждого slick-слайдера в отдельности - за счёт того, что обернул их в разные div'ы (your-class и your-class1).
Но сделать так, чтобы у каждого из них были разные стрелки навигации, никак не получается, потому что их тип, размеры и характеристики подтягиваются из одного и того же управляемого файла. Как сделать так, чтобы стрелками навигации слайдера можно было управлять независимо друг от друга? Даже если я скачиваю файлы slick.css и slick.min.js на жёсткий диск и там меняю нужные мне характеристики, они меняются для обоих слайдеров.
Бьюсь над этим вопросом уже несколько дней, и никто мне помочь не может, к сожалению. Готов даже деньги платить, потому что самому разобраться никак не получается. Спасибо большое заранее!
Адрес проекта на платформе jsfiddle: jsfiddle.net/k2cvouwq/1

Answer 1

[FeST1VaL]

Так вы можете свои стрелки создавать и через параметры на них навешивать события.
Если не ошибаюсь то

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

Или же через css переназначить стили для каждого.

Comments

[Тёма Ти]

А пример можно? Это где прописывать? В общих стилях проекта или настройках jQuery для каждого div?

[FeST1VaL]

Тёма Ти, в jQuery

Answer 2

[Arman]

править файлы либы не стоит, лучше создайте свой styles.css и пропишите его ниже slick.css, там можно указать что-то вроде:

.partys .slick-prev:before {
  content: '<-';
}
.partys .slick-next:before {
  content: '->';
}

это если в доках ничего нет, может как-то опциями еще можно заменить