How to solve the problem with two slick sliders on the page?

Friends, on the page there are two slick-slider ( Both are managed by the same file: slick.css and slick.min.jsI plugged in the head. To set the speed of page turning, settings autoperfectiune and the number of slides I can show via jQuery to every slick-slider separately - due to the fact I wrapped them in different div's (your-class - and your-class1).
But to make it so that each of them was different navigation arrows does not work because of their type, size and features are pulled from the same managed file. How to make arrows on the navigation slider can be controlled independently from each other? Even if I download the files slick.css and slick.min.js to the hard disk and there to change my desired features, they change both sliders.
Struggling with this issue for several days, and no I can not help, unfortunately. Even ready to pay the money, because to understand does not work. Thank you very much in advance!
The address of the project on the platform jsfiddle:
April 4th 20 at 13:08
2 answers
April 4th 20 at 13:10
So you can your hands create and the parameters for them to hang events.
If I'm not mistaken
prevArrow: $('.prev')
nextArrow: $('.next')

Or using css to override styles for each.
A possible example? This is where to register? In General, the styles of the project or the settings of jQuery for each div? - Clement.Kautzer62 commented on April 4th 20 at 13:13
@Clement.Kautzer62in jQuery - Lela commented on April 4th 20 at 13:16
April 4th 20 at 13:12
to edit the file libs is not necessary, it is better to create your styles.css and mount it below the slick.css, there you can specify something like:
.partys .slick-prev:before {
 content: '<-';
.partys .slick-next:before {
 content: '->';

that is, if the docks is nothing, can somehow options can be replaced by another

Find more questions by tags jQuerySliderSlick