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

Question

JavaScript

Friends, I put two different slick sliders on my landing page. For each of them, I registered separate properties and the path to the JS and CSS files in the index file :

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick1.css">
...
<script src="slick.min.js"></script>
<script src="slick1.min.js"></script>

Style.css and common.js files are common.
When loading the page, BOTH sliders for some reason use the data that is stored in slick1 . No matter how much I try to get them to use different properties, nothing works for me. What could be the problem?
I am new to html/css/js so any help would be greatly appreciated. Thank you!

Answer 1

You should use one css and one js file for any number of slick sliders on the page.
If both sliders use the same data, then there are only 2 options:
1) you mistakenly specified the same object as settings for both sliders,
2) you actually initialized the sliders with different settings, on the same selector .
Ps If both options do not suit you - attach js code (it is possible together with html), otherwise you will get nothing but guesswork / assumptions.

Answer 2

You can include 1 CSS and 1 JS file in your html.
Just use different carousel names when initializing.

<div class="slick1 slick-slider">
<div class="slick2 slick-slider">

And throw properties on these classes slick1, slick2