slickスライダーを全く違うデザインで2つ表示したい。

前提・実現したいこと

同じページ内で全く違うデザインのスライダーを二つ作りたいです。

一つ目は完成したのですが、二つ目を表示させようとすると一つ目に作ったスライダーのcssが反映されてしまいうまく表示されません。一つ目と二つ目のcssを完全に分けて作業したいのですがいい方法はありますでしょうか？？（ ; ; ）

cssはslick.cssに直接書いてます。

お手数おかけしますが、よろしくお願いいたします。

該当のソースコード

html
1<div class="slider">
2   <div>
3
4     中略
5
6     <img alt="Alt" src="images/top_kv1-1.jpg" />
7     </div>
8     <div>
9
10     中略
11
12     <img alt="Alt" src="images/top_kv1-1.jpg" />
13     </div>
14     <div>
15
16     中略
17
18     <img alt="Alt" src="images/top_kv1-1.jpg" />
19     </div>
20     <div>
21
22     中略
23
24     <img alt="Alt" src="images/top_kv1-1.jpg" />
25   </div>
26</div>
27
28<ul class="slider2">
29   <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li>
30   <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li>
31   <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li>
32   <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li>
33   <li><img alt="Alt" src="images/top_kv1-1.jpg" ></li>
34</ul>

css
1/* Slider */
2.slider-wrapper{
3	position: relative;
4    overflow: hidden;
5    width: 100%;
6    
7  }
8  
9  
10  .slick-list {
11	position: relative;
12	overflow: hidden;
13	display: block;
14	margin: 0;
15	padding: 0;
16  }
17  
18  .slick-list:focus {
19	outline: none;
20  }
21  
22  .slick-list.dragging {
23	cursor: pointer;
24	cursor: hand;
25  }
26  
27  .slick-slider .slick-list,
28  .slick-track,
29  .slick-slide,
30  .slick-slide img {
31    height: 100vh;
32    object-fit: cover;
33  }
34  
35  .slick-track {
36	position: relative;
37	left: 0;
38	top: 0;
39	display: block;
40	zoom: 1;
41  }
42  
43  .slick-track:before,
44  .slick-track:after {
45	content: "";
46	display: table;
47  }
48  
49  .slick-track:after {
50	clear: both;
51  }
52  
53  .slick-loading .slick-track {
54	visibility: hidden;
55  }
56  
57  .slick-slide {
58	float: left;
59	height: 100%;
60	min-height: 1px;
61	display: none;
62  }
63  
64  .slick-slide img {
65    width: 100%;
66    height: 100vh;
67    margin-top: 82px;
68  }
69  
70  .slick-slide.dragging img {
71    pointer-events: none;
72    width: 100%;
73    height: 100vh;
74  }
75  
76  .slick-initialized .slick-slide {
77	display: block;
78  }
79  
80  .slick-loading .slick-slide {
81	visibility: hidden;
82  }
83  
84  .slick-vertical .slick-slide {
85	display: block;
86	height: auto;
87	border: 1px solid transparent;
88  }
89  
90  .slick-slide > .slick-slider-img {
91	position: relative;
92	display: block;
93	width: 100%;
94    height: 100vh;
95  }
96  
97  .slick-slide .image {
98    /*height: 180px;*/
99    height: 100vh;
100    width: 100%;
101    margin: 0 auto;
102  }
103  
104  .slick-slide img {
105    display: block;
106    width: 100%;
107    height: 100vh;
108  }
109  
110  .slick-slide img.slick-loading {
111	display: none;
112  }
113  
114  
115  .slick-prev{
116    width: 65px;
117	border: none;
118	border-radius: none;
119	position: absolute;
120	top: 50%;
121	transform: translateY(-20%);
122	left: 115px;
123	padding: 0.25em 0.5em;
124	z-index: 400;
125  }
126  
127  .slick-next{
128    width: 65px;
129	border: none;
130	border-radius: none;
131	position: absolute;
132	top: 50%;
133	transform: translateY(-20%);
134	right: 115px;
135	padding: 0.25em 0.5em;
136	z-index: 400;
137  }

js
1$(document).ready(function() {
2
3  const barColors = ['#fff', '#fff', '#fff','#fff'];
4
5  $.fn.startBar = function(index) {
6      this
7          .eq(index)
8          .css({ backgroundColor: barColors[index]})
9          .animate({ width: '100%' }, 3400 );
10  }
11
12  $('.slider').slick({
13      autoplay: true,
14      arrows: true,
15      dots: false,
16      speed: 800,
17      autoplaySpeed: 3000,
18      prevArrow: '<img src="images/slick-prev.svg" class="slide-arrow slick-prev">',
19      nextArrow: '<img src="images/slick-next.svg" class="slide-arrow slick-next">',
20      adaptiveHeight: true
21  }).on('afterChange', function(event, slick, currentSlide) {
22    if (currentSlide === 0)
23        $('.bar').startBar(currentSlide);
24        $('.bar').css({width: 0}).startBar(currentSlide);
25        $('.bar').css({width: 0});
26  });
27  $('.bar').startBar(0);
28
29
30
31
32
33  $('.slider2').slick({
34    autoplay: true,
35    dots: false,
36    speed: 800,
37    autoplaySpeed: 3000,
38    adaptiveHeight: true
39  })
40
41});

行動規範の内容に同意します

回答1件

ベストアンサー

.sliderと. slider2ごとにCSSを書いてみてはどうでしょうか？

CSS
1/* .slider用*/
2.slider .slider-wrapper {
3}
4.slider .slick-list {
5}
6（以下略）
7
8/* .slider2用*/
9.slider2 .slider-wrapper {
10}
11.slider2 .slick-list {
12}
13（以下略）