Slick.jsにて写真が2枚表示されるようにレスポンシブをしたいが、表示されない。

前提・実現したいこと

Slick.jsにタブレット用で「breakpoint: 1024」を設けて、
写真が2枚表示されるようにレスポンシブをしたいのですが、表示がされなく困っています。
試しに1枚と3枚で表示させるように指定するときちんと表示されます。

試行錯誤して調べてみましたが原因がわかりません。
わかる方ご教示いただけませんでしょうか。

該当のソースコード

HTML
1    <h2 class="works-title fade-in-bottom flex font-title animate" id="works">WORKS</h2>
2    <div class="works-inner flex">
3      <div class="works-inner-items flex">
4        <div class="slider-works flex">
5          <div><img src="img/難波.jpg" alt="難波" /></div>
6          <div><img src="img/渋谷.jpg" alt="渋谷" /></div>
7          <div><img src="img/横浜.jpg" alt="横浜" /></div>
8          <div><img src="img/東山.jpg" alt="東山" /></div>
9          <div><img src="img/博多.jpg" alt="博多" /></div>
10          <div><img src="img/花園.jpg" alt="花園" /></div>
11          <div><img src="img/祇園.jpg" alt="祇園" /></div>
12          <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div>
13          <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div>
14          <div><img src="img/新宿.jpg" alt="新宿" /></div>
15          <div><img src="img/川越.jpg" alt="川越" /></div>
16          <div><img src="img/池袋.jpg" alt="池袋" /></div>
17          <div><img src="img/天王寺.jpg" alt="天王寺" /></div>
18          <div><img src="img/梅田.jpg" alt="梅田" /></div>
19          <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div>
20        </div>
21        <div class="work-font font-title">
22          - List of works - <a href="works.html"><i class="work-arrow fas fa-chevron-right"></i></a>
23        </div>
24      </div>
25    </div>
26    <h2 class="blog-title fade-in-bottom flex font-title animate" id="blog">
27      BLOG
28  </h2>
29  <div class="blog-inner flex">
30      <div class="blog-inner-items flex">
31          <div class="slider-blog flex">
32              <div class="blog-article flex">
33                  <a href="article_1.html"><img src="img/記事1.jpg" alt="見やすいサイト条件" /></a>
34                  <h3 class="articles-title flex">見やすいサイト条件</h3>
35                  <div class="articles-time flex">2021/02/10 14:10</div>
36              </div>
37              <div class="blog-article flex">
38                  <a href="article_2.html"><img src="img/記事2.jpg" alt="最近いいなと思ったサイト" /></a>
39                  <h3 class="articles-title flex">最近いいなと思ったサイト</h3>
40                  <div class="articles-time flex">2021/02/11 18:20</div>
41              </div>
42              <div class="blog-article flex">
43                  <a href="article_3.html"><img src="img/記事3.jpg" alt="カメラの選び方" /></a>
44                  <h3 class="articles-title flex">カメラの選び方</h3>
45                  <div class="articles-time flex">2021/02/13 18:10</div>
46              </div>
47          </div>
48          <div class="blog-font font-title">
49              - BLOG一覧 - <a href="blog.html"><i class="blog-arrow fas fa-chevron-right"></i></a>
50          </div>
51      </div>
52  </div>

CSS
1
2
3/* <====== works ======> */
4h2#works {
5  padding-top: 12rem;
6  margin-top: -8rem;
7}
8
9.works-inner {
10  width: 100%;
11  height: 45rem;
12  -webkit-box-orient: vertical;
13  -webkit-box-direction: normal;
14  -webkit-flex-direction: column;
15      -ms-flex-direction: column;
16          flex-direction: column;
17  margin-bottom: 5rem;
18}
19
20.works-inner .works-inner-items {
21  width: 90%;
22  height: 40rem;
23  margin-top: 8rem;
24  position: relative;
25  -webkit-box-orient: vertical;
26  -webkit-box-direction: normal;
27  -webkit-flex-direction: column;
28      -ms-flex-direction: column;
29          flex-direction: column;
30}
31
32.works-inner .works-inner-items::after {
33  width: 100%;
34  height: 40rem;
35  content: "";
36  position: absolute;
37  left: 0rem;
38  top: 1rem;
39  -webkit-transform: skewY(-5deg);
40          transform: skewY(-5deg);
41  z-index: -1;
42  -webkit-transform-origin: bottom left;
43          transform-origin: bottom left;
44  background: black;
45}
46
47.works-inner .works-inner-items .slider-works div img {
48  margin: 0 auto;
49}
50
51.works-inner .works-inner-items .work-font {
52  font-size: 1.5rem;
53  color: white;
54}
55
56.works-inner .works-inner-items .work-font a i {
57  -webkit-transition-duration: 0.4s;
58          transition-duration: 0.4s;
59  padding: 2rem;
60}
61
62.works-inner .works-inner-items .work-font i:hover {
63  -webkit-transform: translateX(20px);
64          transform: translateX(20px);
65}
66
67.works-inner .works-inner-items .work-font .work-arrow {
68  color: white;
69  padding: 1rem;
70}
71
72/* <====== blog ======> */
73h2#blog {
74  padding-top: 12rem;
75  margin-top: -8rem;
76}
77
78.blog-inner {
79  width: 100%;
80  -webkit-box-orient: vertical;
81  -webkit-box-direction: normal;
82  -webkit-flex-direction: column;
83      -ms-flex-direction: column;
84          flex-direction: column;
85}
86
87.blog-inner .blog-inner-items {
88  width: 100%;
89  margin-top: 8rem;
90  -webkit-box-orient: vertical;
91  -webkit-box-direction: normal;
92  -webkit-flex-direction: column;
93      -ms-flex-direction: column;
94          flex-direction: column;
95}
96
97.blog-inner .blog-inner-items .slider-blog .blog-article {
98  -webkit-box-orient: vertical;
99  -webkit-box-direction: normal;
100  -webkit-flex-direction: column;
101      -ms-flex-direction: column;
102          flex-direction: column;
103  padding: 1rem;
104}
105
106.blog-inner .blog-inner-items .slider-blog .blog-article a img {
107  width: 350px;
108  height: 220px;
109  margin: 0 auto;
110}
111
112.blog-inner .blog-inner-items .slider-blog .blog-article .articles-title {
113  font-size: 1rem;
114  padding: 1rem;
115  margin: 0 auto;
116}
117
118.blog-inner .blog-inner-items .slider-blog .blog-article .articles-time {
119  font-size: 0.8rem;
120  margin: 0 auto;
121}
122
123.blog-inner .blog-inner-items .blog-font {
124  margin-top: 4rem;
125  font-size: 1.5rem;
126  color: black;
127}
128
129.blog-inner .blog-inner-items .blog-font a i {
130  -webkit-transition-duration: 0.4s;
131          transition-duration: 0.4s;
132  padding: 2rem;
133}
134
135.blog-inner .blog-inner-items .blog-font i:hover {
136  -webkit-transform: translateX(20px);
137          transform: translateX(20px);
138}
139
140.blog-inner .blog-inner-items .blog-font .blog-arrow {
141  color: black;
142  padding: 1rem;
143}
144
145/* <====== slick-works ======> */
146.works-inner .works-inner-items .slider-works {
147  width: 90%;
148  height: 20rem;
149}
150
151.works-inner .works-inner-items .slider-works div img {
152  width: 25rem;
153  height: 18rem;
154}
155
156.works-inner .works-inner-items .slick-arrow {
157  cursor: pointer;
158  position: absolute;
159  top: 0;
160  bottom: 0;
161  margin: auto;
162}
163
164.works-inner .works-inner-items .prev-arrow {
165  color: white;
166  left: -1.5rem;
167  top: 8rem;
168  z-index: 10;
169}
170
171.works-inner .works-inner-items .next-arrow {
172  color: white;
173  right: -1.5rem;
174  top: 8rem;
175}
176

js
1
2$(".slider-works").slick({
3  infinite: true,
4  autoplay: true,
5  arrow: true,
6  slidesToShow: 3,
7  slidesToScroll: 1,
8  autoplaySpeed: 4000,
9  centerMode: true,
10  centerPadding: "-10%",
11  prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
12  nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
13  responsive: [
14    {
15      breakpoint: 1024,
16      settings: {
17        infinite: true,
18        autoplay: true,
19        arrow: true,
20        slidesToShow: 2,
21        slidesToScroll: 1,
22        autoplaySpeed: 4000,
23        prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>',
24        nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>',
25      },
26    },
27  ],
28});
29
30$(".slider-blog").slick({
31  slidesToShow: 3,
32  responsive: [
33    {
34      breakpoint: 1024,
35      settings: {
36        slidesToShow: 2,
37      },
38    },
39    {
40      breakpoint: 600,
41      settings: {
42        slidesToShow: 1,
43      },
44    },
45  ],
46});

Lhankor_Mhy

2021/02/22 06:04

ご提示のコードを試してみましたが、当方の環境では768*1024でスライダーが2枚になりました。つまり、問題が再現しませんでした。おそらく、ご提示いただいていない部分に原因があると思われます。問題が再現するコードをご提示ください。

TMTN

2021/02/22 13:51

問題が再現するコードとはどの部分を提示したらよろしいでしょうか。初歩的な事ですいません。

lily_night2121

2021/02/24 16:04

私の方でも確認しましたがLhankor_Mhyさんと同様2枚で表示することができました。差し支えないレベルで結構ですので今回ご提示された部分以外の他のコードをできる限り見せていただけますでしょうか？怪しいのはjs周りの競合だと思うので、今回ご提示いただいたjsコード以外に書かれているものがあればご提示ください。

TMTN

2021/02/25 11:05

お返事ありがとうございます。追加が遅くなり大変申し訳ございません。関連するものは載せさせていただきました。 Worksと作っている要素にもSlick,jsを使用しているので挙動がかぶって何か問題が起こっているかもしれません。しかし、自身では解決できませんでした。お手数お掛けしますがご確認いただけますでしょうか。