質問編集履歴

2

<code></code>の範囲を修正しました。どうもすみませんでした。

2017/11/14 12:32

投稿

korokorkorosuke
korokorkorosuke

スコア13

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ```ここに言語を入力
23
+ ```
24
-
25
- ###該当のソースコード
26
24
 
27
25
  <!DOCTYPE html>
28
26
 

1

<code>で囲みました。

2017/11/14 12:32

投稿

korokorkorosuke
korokorkorosuke

スコア13

test CHANGED
File without changes
test CHANGED
@@ -12,542 +12,546 @@
12
12
 
13
13
 
14
14
 
15
+
16
+
17
+
18
+
19
+ Slide2以降がうまくできません。また、最後のスライドから逆に戻ると、全てSlide4の文字になってしまいます。
20
+
21
+
22
+
23
+ ```ここに言語を入力
24
+
25
+ ###該当のソースコード
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <html lang="en">
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
36
+
37
+ <meta name="viewport" content="width=device-width, initial-scale=1">
38
+
39
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
40
+
41
+ <meta name="description" content="">
42
+
43
+ <meta name="author" content="">
44
+
45
+ <link rel="icon" href="docs/favicon.ico">
46
+
47
+ <link href="docs/dist/css/animate.css" rel="stylesheet">
48
+
49
+ <title>swiper-test</title>
50
+
51
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
52
+
53
+ <!--[if lt IE 9]>
54
+
55
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
56
+
57
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
58
+
59
+ <![endif]-->
60
+
61
+ <!-- Swiper core CSS -->
62
+
63
+ <link href="swiper/swiper.min.css" rel="stylesheet">
64
+
65
+ <!-- Demo styles -->
66
+
67
+ <style>
68
+
69
+ div.container.full {
70
+
71
+ width: 100%;
72
+
73
+ }
74
+
75
+ .swiper-container {
76
+
77
+ width: 100% ;
78
+
79
+ height: 600px!important;
80
+
81
+ margin-left: auto;
82
+
83
+ margin-right: auto;
84
+
85
+ }
86
+
87
+ .swiper-slide {
88
+
89
+ background-size: cover;
90
+
91
+ background-position: center;
92
+
93
+ }
94
+
95
+ .gallery-top {
96
+
97
+ height: 80%;
98
+
99
+ width: 100%;
100
+
101
+ }
102
+
103
+ .gallery-thumbs {
104
+
105
+ width: 600px;
106
+
107
+ height: 200px !important;
108
+
109
+ box-sizing: border-box;
110
+
111
+ padding: 10px 0;
112
+
113
+ }
114
+
115
+ .gallery-thumbs .swiper-slide {
116
+
117
+ width: 200px;
118
+
119
+ height: 150px;
120
+
121
+ opacity: 1;
122
+
123
+ }
124
+
125
+ .gallery-thumbs .swiper-slide-active {
126
+
127
+ opacity: 1;
128
+
129
+ }
130
+
131
+ h2.slidetytle {
132
+
133
+ font-size: 200px;
134
+
135
+ color: #ffffff;
136
+
137
+ text-align: center;
138
+
139
+ }
140
+
141
+ h4.caption {
142
+
143
+ color: #ffffff;
144
+
145
+ padding: 10px;
146
+
147
+ background-color: #000000;
148
+
149
+ margin-top: 150px;
150
+
151
+ }
152
+
153
+
154
+
155
+ <!-- typing -->
156
+
157
+ div.tytlebox {
158
+
159
+ text-align: center !important;}
160
+
161
+ .textSplitLoad {
162
+
163
+   display: none;
164
+
165
+ }
166
+
167
+
168
+
169
+ .split {
170
+
171
+ visibility: hidden;
172
+
173
+ text-align: center;
174
+
175
+ font-size: 60px;
176
+
177
+ }
178
+
179
+
180
+
181
+ /* .row.tytle1 {
182
+
183
+ color: #FFFFFF;
184
+
185
+ z-index: 10;
186
+
187
+ position: absolute;
188
+
189
+ top: 200px;
190
+
191
+ left:100px;
192
+
193
+ width: 75%;
194
+
195
+ } */
196
+
197
+ div.swiper-button-prev.swiper-button-white,div.swiper-button-next.swiper-button-white {
198
+
199
+ margin-top: -240px;
200
+
201
+ }
202
+
203
+ </style>
204
+
205
+ </head>
206
+
207
+
208
+
209
+ <body>
210
+
211
+ <div class="container full">
212
+
213
+ <div class="row row-swiper-slide">
214
+
215
+ <!-- Swiper -->
216
+
217
+ <div class="swiper-container gallery-top">
218
+
219
+ <div class="swiper-wrapper">
220
+
221
+ <div class="swiper-slide" style="background-image:url(img/koro/sample01.jpg);"><h2 class="slidetytle split split1">slide1</h2></div>
222
+
223
+ <div class="swiper-slide" style="background-image:url(img/koro/sample02.jpg);"><h2 class="slidetytle split split2">slide2</h2></div>
224
+
225
+ <div class="swiper-slide" style="background-image:url(img/koro/sample03.jpg);"><h2 class="slidetytle spilt split3">slide3</h2></div>
226
+
227
+ <div class="swiper-slide" style="background-image:url(img/koro/sample04.jpg);"><h2 class="slidetytle split split4">slide4</h2></div>
228
+
229
+ </div>
230
+
231
+ <!--Add Arrows -->
232
+
233
+ </div>
234
+
235
+ <div class="swiper-button-next swiper-button-white"></div>
236
+
237
+ <div class="swiper-button-prev swiper-button-white"></div>
238
+
239
+ <div class="swiper-container gallery-thumbs">
240
+
241
+ <div class="swiper-wrapper thumbox" style="transition-duration: 0ms;
242
+
243
+ transform: translate3d(0px, 0px, 0px);" >
244
+
245
+ <div class="swiper-slide smal" style="background-image:url(img/koro/sample01.jpg); positon:top"><h4 class="caption">caption1</h4></div>
246
+
247
+ <div class="swiper-slide smal" style="background-image:url(img/koro/sample02.jpg); positon:top"><h4 class="caption">caption2</h4></div>
248
+
249
+ <div class="swiper-slide smal" style="background-image:url(img/koro/sample03.jpg); positon:top"><h4 class="caption">caption3</h4></div>
250
+
251
+ <div class="swiper-slide smal" style="background-image:url(img/koro/sample04.jpg); positon:top"><h4 class="caption">caption4</h4></div>
252
+
253
+ </div>
254
+
255
+ </div>
256
+
257
+ </div><!--/.row-slide-->
258
+
259
+
260
+
261
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
262
+
263
+ <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
264
+
265
+
266
+
267
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
268
+
269
+ <script>
270
+
271
+ $(function(){
272
+
273
+ var setElm = $('.split'),
274
+
275
+ delaySpeed = 300,
276
+
277
+ fadeSpeed = 0;
278
+
279
+
280
+
281
+ setText = setElm.html();
282
+
283
+
284
+
285
+ setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
286
+
287
+ var elmThis = $(this);
288
+
289
+ if (this.nodeType == 3) {
290
+
291
+ var $this = $(this);
292
+
293
+ $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
294
+
295
+ }
296
+
297
+ });
298
+
299
+ $(window).load(function(){
300
+
301
+ splitLength = $('.textSplitLoad').length;
302
+
303
+ setElm.find('.textSplitLoad').each(function(i){
304
+
305
+ splitThis = $(this);
306
+
307
+ splitTxt = splitThis.text();
308
+
309
+ splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
310
+
311
+ });
312
+
313
+ setTimeout(function(){
314
+
315
+ setElm.html(setText);
316
+
317
+ },splitLength*delaySpeed+fadeSpeed);
318
+
319
+ });
320
+
321
+ });
322
+
323
+
324
+
325
+ $(function(){
326
+
327
+ var setElm = $('.split2'),
328
+
329
+ delaySpeed = 300,
330
+
331
+ fadeSpeed = 0;
332
+
333
+
334
+
335
+ setText = setElm.html();
336
+
337
+
338
+
339
+ setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
340
+
341
+ var elmThis = $(this);
342
+
343
+ if (this.nodeType == 3) {
344
+
345
+ var $this = $(this);
346
+
347
+ $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
348
+
349
+ }
350
+
351
+ });
352
+
353
+ $(window).load(function(){
354
+
355
+ splitLength = $('.textSplitLoad').length;
356
+
357
+ setElm.find('.textSplitLoad').each(function(i){
358
+
359
+ splitThis = $(this);
360
+
361
+ splitTxt = splitThis.text();
362
+
363
+ splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
364
+
365
+ });
366
+
367
+ setTimeout(function(){
368
+
369
+ setElm.html(setText);
370
+
371
+ },splitLength*delaySpeed+fadeSpeed);
372
+
373
+ });
374
+
375
+ });
376
+
377
+
378
+
379
+ $(function(){
380
+
381
+ var setElm = $('.split3'),
382
+
383
+ delaySpeed = 300,
384
+
385
+ fadeSpeed = 0;
386
+
387
+
388
+
389
+ setText = setElm.html();
390
+
391
+
392
+
393
+ setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
394
+
395
+ var elmThis = $(this);
396
+
397
+ if (this.nodeType == 3) {
398
+
399
+ var $this = $(this);
400
+
401
+ $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
402
+
403
+ }
404
+
405
+ });
406
+
407
+ $(window).load(function(){
408
+
409
+ splitLength = $('.textSplitLoad').length;
410
+
411
+ setElm.find('.textSplitLoad').each(function(i){
412
+
413
+ splitThis = $(this);
414
+
415
+ splitTxt = splitThis.text();
416
+
417
+ splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
418
+
419
+ });
420
+
421
+ setTimeout(function(){
422
+
423
+ setElm.html(setText);
424
+
425
+ },splitLength*delaySpeed+fadeSpeed);
426
+
427
+ });
428
+
429
+ });
430
+
431
+ $(function(){
432
+
433
+ var setElm = $('.split4'),
434
+
435
+ delaySpeed = 300,
436
+
437
+ fadeSpeed = 0;
438
+
439
+
440
+
441
+ setText = setElm.html();
442
+
443
+
444
+
445
+ setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
446
+
447
+ var elmThis = $(this);
448
+
449
+ if (this.nodeType == 3) {
450
+
451
+ var $this = $(this);
452
+
453
+ $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
454
+
455
+ }
456
+
457
+ });
458
+
459
+ $(window).load(function(){
460
+
461
+ splitLength = $('.textSplitLoad').length;
462
+
463
+ setElm.find('.textSplitLoad').each(function(i){
464
+
465
+ splitThis = $(this);
466
+
467
+ splitTxt = splitThis.text();
468
+
469
+ splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
470
+
471
+ });
472
+
473
+ setTimeout(function(){
474
+
475
+ setElm.html(setText);
476
+
477
+ },splitLength*delaySpeed+fadeSpeed);
478
+
479
+ });
480
+
481
+ });
482
+
483
+ </script>
484
+
485
+
486
+
487
+
488
+
489
+ <!-- Swiper -->
490
+
491
+ <script src="swiper/swiper.min.js"></script>
492
+
493
+ <!-- Initialize Swiper -->
494
+
495
+ <script>
496
+
497
+ var galleryTop = new Swiper('.gallery-top', {
498
+
499
+ spaceBetween: 0,
500
+
501
+ direction: 'vertical',
502
+
503
+ navigation: {
504
+
505
+ nextEl: '.swiper-button-next',
506
+
507
+ prevEl: '.swiper-button-prev',
508
+
509
+ },
510
+
511
+ });
512
+
513
+ var galleryThumbs = new Swiper('.gallery-thumbs', {
514
+
515
+ spaceBetween: 0,
516
+
517
+ centeredSlides: true,
518
+
519
+ slidesPerView: '3',
520
+
521
+ touchRatio: 0.2,
522
+
523
+ slideToClickedSlide: true,
524
+
525
+ initialSlide:2,
526
+
527
+ });
528
+
529
+ galleryTop.controller.control = galleryThumbs;
530
+
531
+ galleryThumbs.controller.control = galleryTop;
532
+
533
+
534
+
535
+ $(document).on('clicke','.swiper-button-next ',function(){
536
+
537
+ $(this).css("background","red");
538
+
539
+ });
540
+
541
+ </script>
542
+
543
+
544
+
545
+ </body>
546
+
547
+ </html>
548
+
549
+
550
+
15
551
  ```
16
552
 
17
553
 
18
554
 
19
- Slide2以降がうまくできません。また、最後のスライドから逆に戻ると、全てSlide4の文字になってしまいます。
20
-
21
-
22
-
23
- ###該当のソースコード
24
-
25
- <!DOCTYPE html>
26
-
27
- <html lang="en">
28
-
29
- <head>
30
-
31
- <meta charset="utf-8">
32
-
33
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
34
-
35
- <meta name="viewport" content="width=device-width, initial-scale=1">
36
-
37
- <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
38
-
39
- <meta name="description" content="">
40
-
41
- <meta name="author" content="">
42
-
43
- <link rel="icon" href="docs/favicon.ico">
44
-
45
- <link href="docs/dist/css/animate.css" rel="stylesheet">
46
-
47
- <title>swiper-test</title>
48
-
49
- <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
50
-
51
- <!--[if lt IE 9]>
52
-
53
- <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
54
-
55
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
56
-
57
- <![endif]-->
58
-
59
- <!-- Swiper core CSS -->
60
-
61
- <link href="swiper/swiper.min.css" rel="stylesheet">
62
-
63
- <!-- Demo styles -->
64
-
65
- <style>
66
-
67
- div.container.full {
68
-
69
- width: 100%;
70
-
71
- }
72
-
73
- .swiper-container {
74
-
75
- width: 100% ;
76
-
77
- height: 600px!important;
78
-
79
- margin-left: auto;
80
-
81
- margin-right: auto;
82
-
83
- }
84
-
85
- .swiper-slide {
86
-
87
- background-size: cover;
88
-
89
- background-position: center;
90
-
91
- }
92
-
93
- .gallery-top {
94
-
95
- height: 80%;
96
-
97
- width: 100%;
98
-
99
- }
100
-
101
- .gallery-thumbs {
102
-
103
- width: 600px;
104
-
105
- height: 200px !important;
106
-
107
- box-sizing: border-box;
108
-
109
- padding: 10px 0;
110
-
111
- }
112
-
113
- .gallery-thumbs .swiper-slide {
114
-
115
- width: 200px;
116
-
117
- height: 150px;
118
-
119
- opacity: 1;
120
-
121
- }
122
-
123
- .gallery-thumbs .swiper-slide-active {
124
-
125
- opacity: 1;
126
-
127
- }
128
-
129
- h2.slidetytle {
130
-
131
- font-size: 200px;
132
-
133
- color: #ffffff;
134
-
135
- text-align: center;
136
-
137
- }
138
-
139
- h4.caption {
140
-
141
- color: #ffffff;
142
-
143
- padding: 10px;
144
-
145
- background-color: #000000;
146
-
147
- margin-top: 150px;
148
-
149
- }
150
-
151
-
152
-
153
- <!-- typing -->
154
-
155
- div.tytlebox {
156
-
157
- text-align: center !important;}
158
-
159
- .textSplitLoad {
160
-
161
-   display: none;
162
-
163
- }
164
-
165
-
166
-
167
- .split {
168
-
169
- visibility: hidden;
170
-
171
- text-align: center;
172
-
173
- font-size: 60px;
174
-
175
- }
176
-
177
-
178
-
179
- /* .row.tytle1 {
180
-
181
- color: #FFFFFF;
182
-
183
- z-index: 10;
184
-
185
- position: absolute;
186
-
187
- top: 200px;
188
-
189
- left:100px;
190
-
191
- width: 75%;
192
-
193
- } */
194
-
195
- div.swiper-button-prev.swiper-button-white,div.swiper-button-next.swiper-button-white {
196
-
197
- margin-top: -240px;
198
-
199
- }
200
-
201
- </style>
202
-
203
- </head>
204
-
205
-
206
-
207
- <body>
208
-
209
- <div class="container full">
210
-
211
- <div class="row row-swiper-slide">
212
-
213
- <!-- Swiper -->
214
-
215
- <div class="swiper-container gallery-top">
216
-
217
- <div class="swiper-wrapper">
218
-
219
- <div class="swiper-slide" style="background-image:url(img/koro/sample01.jpg);"><h2 class="slidetytle split split1">slide1</h2></div>
220
-
221
- <div class="swiper-slide" style="background-image:url(img/koro/sample02.jpg);"><h2 class="slidetytle split split2">slide2</h2></div>
222
-
223
- <div class="swiper-slide" style="background-image:url(img/koro/sample03.jpg);"><h2 class="slidetytle spilt split3">slide3</h2></div>
224
-
225
- <div class="swiper-slide" style="background-image:url(img/koro/sample04.jpg);"><h2 class="slidetytle split split4">slide4</h2></div>
226
-
227
- </div>
228
-
229
- <!--Add Arrows -->
230
-
231
- </div>
232
-
233
- <div class="swiper-button-next swiper-button-white"></div>
234
-
235
- <div class="swiper-button-prev swiper-button-white"></div>
236
-
237
- <div class="swiper-container gallery-thumbs">
238
-
239
- <div class="swiper-wrapper thumbox" style="transition-duration: 0ms;
240
-
241
- transform: translate3d(0px, 0px, 0px);" >
242
-
243
- <div class="swiper-slide smal" style="background-image:url(img/koro/sample01.jpg); positon:top"><h4 class="caption">caption1</h4></div>
244
-
245
- <div class="swiper-slide smal" style="background-image:url(img/koro/sample02.jpg); positon:top"><h4 class="caption">caption2</h4></div>
246
-
247
- <div class="swiper-slide smal" style="background-image:url(img/koro/sample03.jpg); positon:top"><h4 class="caption">caption3</h4></div>
248
-
249
- <div class="swiper-slide smal" style="background-image:url(img/koro/sample04.jpg); positon:top"><h4 class="caption">caption4</h4></div>
250
-
251
- </div>
252
-
253
- </div>
254
-
255
- </div><!--/.row-slide-->
256
-
257
-
258
-
259
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
260
-
261
- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
262
-
263
-
264
-
265
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
266
-
267
- <script>
268
-
269
- $(function(){
270
-
271
- var setElm = $('.split'),
272
-
273
- delaySpeed = 300,
274
-
275
- fadeSpeed = 0;
276
-
277
-
278
-
279
- setText = setElm.html();
280
-
281
-
282
-
283
- setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
284
-
285
- var elmThis = $(this);
286
-
287
- if (this.nodeType == 3) {
288
-
289
- var $this = $(this);
290
-
291
- $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
292
-
293
- }
294
-
295
- });
296
-
297
- $(window).load(function(){
298
-
299
- splitLength = $('.textSplitLoad').length;
300
-
301
- setElm.find('.textSplitLoad').each(function(i){
302
-
303
- splitThis = $(this);
304
-
305
- splitTxt = splitThis.text();
306
-
307
- splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
308
-
309
- });
310
-
311
- setTimeout(function(){
312
-
313
- setElm.html(setText);
314
-
315
- },splitLength*delaySpeed+fadeSpeed);
316
-
317
- });
318
-
319
- });
320
-
321
-
322
-
323
- $(function(){
324
-
325
- var setElm = $('.split2'),
326
-
327
- delaySpeed = 300,
328
-
329
- fadeSpeed = 0;
330
-
331
-
332
-
333
- setText = setElm.html();
334
-
335
-
336
-
337
- setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
338
-
339
- var elmThis = $(this);
340
-
341
- if (this.nodeType == 3) {
342
-
343
- var $this = $(this);
344
-
345
- $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
346
-
347
- }
348
-
349
- });
350
-
351
- $(window).load(function(){
352
-
353
- splitLength = $('.textSplitLoad').length;
354
-
355
- setElm.find('.textSplitLoad').each(function(i){
356
-
357
- splitThis = $(this);
358
-
359
- splitTxt = splitThis.text();
360
-
361
- splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
362
-
363
- });
364
-
365
- setTimeout(function(){
366
-
367
- setElm.html(setText);
368
-
369
- },splitLength*delaySpeed+fadeSpeed);
370
-
371
- });
372
-
373
- });
374
-
375
-
376
-
377
- $(function(){
378
-
379
- var setElm = $('.split3'),
380
-
381
- delaySpeed = 300,
382
-
383
- fadeSpeed = 0;
384
-
385
-
386
-
387
- setText = setElm.html();
388
-
389
-
390
-
391
- setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
392
-
393
- var elmThis = $(this);
394
-
395
- if (this.nodeType == 3) {
396
-
397
- var $this = $(this);
398
-
399
- $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
400
-
401
- }
402
-
403
- });
404
-
405
- $(window).load(function(){
406
-
407
- splitLength = $('.textSplitLoad').length;
408
-
409
- setElm.find('.textSplitLoad').each(function(i){
410
-
411
- splitThis = $(this);
412
-
413
- splitTxt = splitThis.text();
414
-
415
- splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
416
-
417
- });
418
-
419
- setTimeout(function(){
420
-
421
- setElm.html(setText);
422
-
423
- },splitLength*delaySpeed+fadeSpeed);
424
-
425
- });
426
-
427
- });
428
-
429
- $(function(){
430
-
431
- var setElm = $('.split4'),
432
-
433
- delaySpeed = 300,
434
-
435
- fadeSpeed = 0;
436
-
437
-
438
-
439
- setText = setElm.html();
440
-
441
-
442
-
443
- setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
444
-
445
- var elmThis = $(this);
446
-
447
- if (this.nodeType == 3) {
448
-
449
- var $this = $(this);
450
-
451
- $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
452
-
453
- }
454
-
455
- });
456
-
457
- $(window).load(function(){
458
-
459
- splitLength = $('.textSplitLoad').length;
460
-
461
- setElm.find('.textSplitLoad').each(function(i){
462
-
463
- splitThis = $(this);
464
-
465
- splitTxt = splitThis.text();
466
-
467
- splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
468
-
469
- });
470
-
471
- setTimeout(function(){
472
-
473
- setElm.html(setText);
474
-
475
- },splitLength*delaySpeed+fadeSpeed);
476
-
477
- });
478
-
479
- });
480
-
481
- </script>
482
-
483
-
484
-
485
-
486
-
487
- <!-- Swiper -->
488
-
489
- <script src="swiper/swiper.min.js"></script>
490
-
491
- <!-- Initialize Swiper -->
492
-
493
- <script>
494
-
495
- var galleryTop = new Swiper('.gallery-top', {
496
-
497
- spaceBetween: 0,
498
-
499
- direction: 'vertical',
500
-
501
- navigation: {
502
-
503
- nextEl: '.swiper-button-next',
504
-
505
- prevEl: '.swiper-button-prev',
506
-
507
- },
508
-
509
- });
510
-
511
- var galleryThumbs = new Swiper('.gallery-thumbs', {
512
-
513
- spaceBetween: 0,
514
-
515
- centeredSlides: true,
516
-
517
- slidesPerView: '3',
518
-
519
- touchRatio: 0.2,
520
-
521
- slideToClickedSlide: true,
522
-
523
- initialSlide:2,
524
-
525
- });
526
-
527
- galleryTop.controller.control = galleryThumbs;
528
-
529
- galleryThumbs.controller.control = galleryTop;
530
-
531
-
532
-
533
- $(document).on('clicke','.swiper-button-next ',function(){
534
-
535
- $(this).css("background","red");
536
-
537
- });
538
-
539
- </script>
540
-
541
-
542
-
543
- </body>
544
-
545
- </html>
546
-
547
-
548
-
549
-
550
-
551
555
  ###試したこと
552
556
 
553
557
  メインの各スライドに、クラスspiltの後にspilt1、spilt2、spilt3、spilt4を付加し、Scriptを上記のように記述しました。