質問編集履歴
1
javascriptと補足情報、試した点が抜けてしまっていたので追記した。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
このプロセスで目的を完遂できるか
|
|
33
|
+
このプロセスで目的を完遂できるか考えてみた。
|
|
34
|
+
|
|
35
|
+
しかしJSの処理に詰まってしまった。
|
|
34
36
|
|
|
35
37
|
```
|
|
36
38
|
|
|
@@ -336,13 +338,107 @@
|
|
|
336
338
|
|
|
337
339
|
```
|
|
338
340
|
|
|
341
|
+
```JS
|
|
342
|
+
|
|
343
|
+
const changeSlideSpeed = 1000;
|
|
344
|
+
|
|
345
|
+
const swiper = new Swiper('.swiper-container', {
|
|
346
|
+
|
|
347
|
+
speed: changeSlideSpeed,
|
|
348
|
+
|
|
349
|
+
loop: true,
|
|
350
|
+
|
|
351
|
+
slidesPerView: 4,
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
autoplay: {
|
|
356
|
+
|
|
357
|
+
delay: 2500,
|
|
358
|
+
|
|
359
|
+
disableOnInteraction: false,
|
|
360
|
+
|
|
361
|
+
},
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
pagination: {
|
|
366
|
+
|
|
367
|
+
el: '.swiper-pagination',
|
|
368
|
+
|
|
369
|
+
clickable: true
|
|
370
|
+
|
|
371
|
+
},
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
navigation: {
|
|
376
|
+
|
|
377
|
+
nextEl: '.slide-ac-text',
|
|
378
|
+
|
|
379
|
+
},
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
on: {
|
|
384
|
+
|
|
385
|
+
init: function () {
|
|
386
|
+
|
|
387
|
+
const self = this;
|
|
388
|
+
|
|
389
|
+
setTimeout(() => {
|
|
390
|
+
|
|
391
|
+
const slideElement = self.slides;
|
|
392
|
+
|
|
393
|
+
for (let i = 0; i < slideElement.length; i++) {
|
|
394
|
+
|
|
395
|
+
slideElement[i].style.transition = (changeSlideSpeed / 1000) + 's';
|
|
396
|
+
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
}, 10);
|
|
400
|
+
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
});
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
|
|
411
|
+
const slideBtn = document.querySelectorAll('.swiper-pagination > *');
|
|
412
|
+
|
|
413
|
+
// console.log(slideBtn);
|
|
414
|
+
|
|
415
|
+
const slideSv = document.querySelector('.news__ac-btn');
|
|
416
|
+
|
|
417
|
+
slideBtn.forEach(a => {
|
|
418
|
+
|
|
419
|
+
a.addEventListener('load', function (e) {
|
|
420
|
+
|
|
421
|
+
console.log(e.target, 'e.target');
|
|
422
|
+
|
|
423
|
+
})
|
|
424
|
+
|
|
425
|
+
if (a.className === 'swiper-pagination-bullet-active') {
|
|
426
|
+
|
|
427
|
+
this.style.display = 'none';
|
|
428
|
+
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
})
|
|
432
|
+
|
|
433
|
+
```
|
|
434
|
+
|
|
339
435
|
|
|
340
436
|
|
|
341
437
|
### 試したこと
|
|
342
438
|
|
|
343
439
|
|
|
344
440
|
|
|
345
|
-
|
|
441
|
+
svgのアニメーションを作成した。
|
|
346
442
|
|
|
347
443
|
|
|
348
444
|
|
|
@@ -350,4 +446,16 @@
|
|
|
350
446
|
|
|
351
447
|
|
|
352
448
|
|
|
353
|
-
|
|
449
|
+
【swiper】
|
|
450
|
+
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
css
|
|
454
|
+
|
|
455
|
+
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
|
|
459
|
+
js
|
|
460
|
+
|
|
461
|
+
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|