質問編集履歴

5

不要箇所の削除と少し補足追加

2017/08/10 07:15

投稿

chanNORI
chanNORI

スコア27

test CHANGED
File without changes
test CHANGED
@@ -254,6 +254,8 @@
254
254
 
255
255
  これをbeforeChangeのタイミングで付与させたいです。
256
256
 
257
+ ※top_slide_onと区別するためにaddClassをtop_slide_firstとしてあります。
258
+
257
259
 
258
260
 
259
261
  ```ここに言語を入力
@@ -265,9 +267,3 @@
265
267
  });
266
268
 
267
269
  ```
268
-
269
-
270
-
271
- ###補足情報(言語/FW/ツール等のバージョンなど)
272
-
273
- より詳細な情報

4

コードを一部修正

2017/08/10 07:15

投稿

chanNORI
chanNORI

スコア27

test CHANGED
File without changes
test CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  });
94
94
 
95
- $('#top_slide_left').on('reinit', function(slick){
95
+ $('#top_slide_left').on('init', function(slick){
96
96
 
97
97
  $('#top_slide_left li:first-child').addClass("top_slide_on");
98
98
 

3

試したことを追加しました

2017/08/10 07:05

投稿

chanNORI
chanNORI

スコア27

test CHANGED
File without changes
test CHANGED
@@ -245,3 +245,29 @@
245
245
  </styles>
246
246
 
247
247
  ```
248
+
249
+
250
+
251
+ ###試したこと
252
+
253
+ slickが初期化された時に1番目の要素にclass名を付与させようとしましたが、afterChangeのタイミングで付与されました。
254
+
255
+ これをbeforeChangeのタイミングで付与させたいです。
256
+
257
+
258
+
259
+ ```ここに言語を入力
260
+
261
+ $('#top_slide_left').on('init', function(slick){
262
+
263
+ $('#top_slide_left li:first-child').addClass("top_slide_first");
264
+
265
+ });
266
+
267
+ ```
268
+
269
+
270
+
271
+ ###補足情報(言語/FW/ツール等のバージョンなど)
272
+
273
+ より詳細な情報

2

cssを追加いたしました。よろしくお願いいたします。

2017/08/10 07:03

投稿

chanNORI
chanNORI

スコア27

test CHANGED
File without changes
test CHANGED
@@ -130,4 +130,118 @@
130
130
 
131
131
  </script>
132
132
 
133
+
134
+
135
+ <styles>
136
+
137
+ header .slide {
138
+
139
+ display: flex;
140
+
141
+ }
142
+
143
+ /* line 292, style.scss */
144
+
145
+ header .slide li {
146
+
147
+ width: 100%;
148
+
149
+ background-size: cover;
150
+
151
+ background-position: center;
152
+
153
+ background-repeat: no-repeat;
154
+
155
+ }
156
+
157
+ /* line 298, style.scss */
158
+
159
+ header .slide .left {
160
+
161
+ width: 50%;
162
+
163
+ }
164
+
165
+ /* line 300, style.scss */
166
+
167
+ header .slide .left .slide1 {
168
+
169
+ background-image: url(/img/top_main_left1.jpg);
170
+
171
+ }
172
+
173
+ /* line 303, style.scss */
174
+
175
+ header .slide .left .slide2 {
176
+
177
+ background-image: url(/img/top_main_left2.jpg);
178
+
179
+ }
180
+
181
+ /* line 306, style.scss */
182
+
183
+ header .slide .left .slide3 {
184
+
185
+ background-image: url(/img/top_main_left3.jpg);
186
+
187
+ }
188
+
189
+ /* line 310, style.scss */
190
+
191
+ header .slide .right {
192
+
193
+ width: 50%;
194
+
195
+ }
196
+
197
+ /* line 312, style.scss */
198
+
199
+ header .slide .right .slide1 {
200
+
201
+ background-image: url(/img/top_main_right1.jpg);
202
+
203
+ }
204
+
205
+ /* line 315, style.scss */
206
+
207
+ header .slide .right .slide2 {
208
+
209
+ background-image: url(/img/top_main_right2.jpg);
210
+
211
+ }
212
+
213
+ /* line 318, style.scss */
214
+
215
+ header .slide .right .slide3 {
216
+
217
+ background-image: url(/img/top_main_right3.jpg);
218
+
219
+ }
220
+
221
+ /* line 322, style.scss */
222
+
223
+ header .slide .top_slide_on {
224
+
225
+ animation: slick-active 10s linear forwards;
226
+
227
+ }
228
+
229
+ @keyframes slick-active {
230
+
231
+ 0% {
232
+
233
+ transform: scale(1);
234
+
235
+ }
236
+
237
+ 100% {
238
+
239
+ transform: scale(1.1);
240
+
241
+ }
242
+
243
+ }
244
+
245
+ </styles>
246
+
133
247
  ```

1

コードを見やすく

2017/08/10 06:27

投稿

chanNORI
chanNORI

スコア27

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,8 @@
17
17
 
18
18
 
19
19
  ###該当のソースコード
20
+
21
+ ```ここに言語を入力
20
22
 
21
23
  <div class="left">
22
24
 
@@ -45,6 +47,8 @@
45
47
  </ul>
46
48
 
47
49
  </div>
50
+
51
+
48
52
 
49
53
 
50
54
 
@@ -125,3 +129,5 @@
125
129
  });
126
130
 
127
131
  </script>
132
+
133
+ ```