slickスライダーで読み込み時に一瞬画像が大きく表示されてしまう

slickスライダー一瞬画像が大きく表示されてしまうのを無くしたいです。

スライドに固定幅を指定していないのが原因だと思うのですが、
固定幅を指定するとスマホのときに別ページから戻るとスライドの位置がずれてしまいます。

こちらの回避方法はありますか？

html
1<link href="css/slick.css" rel="stylesheet">
2<link href="css/slick-theme.css" rel="stylesheet">
3
4<div class="slider-area">
5	<div class="index-slider">
6　　　　　<div class="slide-elm"><a href="リンクＵＲＬ" class="block"><img src="画像ソース" alt=""></a></div>
7　　　　　<div class="slide-elm"><a href="リンクＵＲＬ" class="block"><img src="画像ソース" alt=""></a></div>
8　　　　　<div class="slide-elm"><a href="リンクＵＲＬ" class="block"><img src="画像ソース" alt=""></a></div>
9　　　　　<div class="slide-elm"><a href="リンクＵＲＬ" class="block"><img src="画像ソース" alt=""></a></div>
10　　　　　<div class="slide-elm"><a href="リンクＵＲＬ" class="block"><img src="画像ソース" alt=""></a></div>				
11	</div>
12	<div class="arrow"></div>
13</div>

css
1.slider-area {
2	position: relative;
3}
4
5.index-slider .slick-slide {
6	background: #000;
7	-webkit-transition: all .5s;
8	transition: all .5s;
9}
10
11.index-slider .slick-slide img {
12	opacity: 0.6;
13	-webkit-transition: all .5s;
14	transition: all .5s;
15}
16
17.index-slider .slick-current {
18	background: none;
19}
20
21.index-slider .slick-current img {
22	opacity: 1;
23}
24
25.index-slider {
26	width: 100%;
27}
28
29.slide-elm img {
30	width: 100%;
31    height: auto;
32}
33
34.arrow {
35	position: absolute;
36	top: 50%;
37	left: 50%;
38	width: 38%;
39	margin: 0 auto;
40	transform: translateY(-50%) translateX(-50%);
41    -webkit-transform: translateY(-50%) translateX(-50%);
42}
43
44.arrow .slick-prev {
45    position: absolute;
46    width: 50px;
47	height: 70px;
48	top: 50%;
49    left: 0;
50    background: url(../images/index/slide-left.png)no-repeat;
51    background-position: center center;
52    background-size: contain;
53    z-index: 10;
54	font-size: 0;
55	transform: translateY(-50%);
56	-webkit-transform: translateY(-50%);
57	cursor: pointer;
58}
59
60.arrow .slick-next {
61　　position: absolute;
62　　width: 50px;
63　　height: 70px;
64　　top: 50%;
65　　right: 0;
66　　background: url(../images/index/slide-right.png)no-repeat;
67　　background-position: center center;
68　　background-size: contain;
69　　z-index: 10;
70　　font-size: 0;
71　　transform: translateY(-50%);
72　　-webkit-transform: translateY(-50%);
73　　cursor: pointer;
74}
75
76@media screen and (max-width: 768px) {
77	
78	.index-slider .slick-slide {
79		background: none;
80	}
81
82	.index-slider .slick-slide img {
83		opacity: 1;
84	}
85	
86	.slide-elm {
87		width: 100vw;
88	}
89	
90	.arrow {
91		width: 100%;	
92	}
93
94	.arrow .slick-prev,
95	.arrow .slick-next {
96		width: 20px;
97		height: 400px;
98	}
99	
100}

js
1
2$('.index-slider').slick({
3　　autoplay: true,
4　　centerMode: true,
5　　slidesToShow: 3,
6　　slidesToScroll: 1,
7　　appendArrows: $('.arrow'),
8　　responsive: [{
9　　breakpoint: 768,
10　　　　settings: {
11　　　　　　slidesToShow: 1,
12　　　　　　slidesToScroll: 1,
13　　　　　　centerMode: false,
14		}
15   　　}
16　　]
17});

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

回答1件

ベストアンサー

状況が完全に再現できているわけではないですが、一つの方法を回答します。

ページ読み込み時画像が一瞬大きく表示されるのは、slickスライダーをロードしてslickスライダーが画像のサイズを調整する前に、CSSのスタイルだけがあたった画像が見えているのが原因の可能性があります。

そうだとすると、slickスライダーが読み込まれるまではimgを非表示にして、slickスライダーが読み込まれたら表示するとサイズが整った画像が表示されると思いました。

css
1slide-elm img {
2    width: 100%;
3    height: auto;
4    opacity: 0; // この行を追加
5}

こうすると、Slickスライダーが読み込まれるまではユーザーには見えないですが、Slickスライダーが読み込まれると、すでに定義されているスタイルが有効になるので画像が見えるようになります。

css
1.index-slider .slick-slide img {
2    opacity: 0.6; // ここと
3    -webkit-transition: all .5s;
4    transition: all .5s;
5}
6...
7
8.index-slider .slick-current img {
9    opacity: 1; // ここです
10}