teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

修正

2021/01/19 17:01

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -1,1 +1,127 @@
1
- スライダーの背景色をcssで黒にしたら出来ます。
1
+ スライダーの背景色をcssで黒にしたら出来ます。
2
+ と思ったら出来ませんでした。
3
+ optionを色々と調べたんですが出来ませんでした。
4
+ 仕方がないのでcssAnimationをJavascriptで追加して対応しました。
5
+
6
+ ```html
7
+ <!DOCTYPE html>
8
+ <html lang="ja">
9
+
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+ <title>swiper(fade)</title>
14
+ <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
15
+ <style>
16
+ .swiper-container {
17
+ width: 600px;
18
+ height: 400px;
19
+ text-align: center;
20
+ }
21
+
22
+ .fade {
23
+ width: 600px;
24
+ height: 400px;
25
+ background-color: black;
26
+ opacity: 0;
27
+ z-index: 1;
28
+ position: absolute;
29
+ top: 0;
30
+
31
+ }
32
+
33
+ .fadeOut {
34
+ animation-name: fadeOut;
35
+ animation-duration: 0.5s;
36
+ animation-delay: 4s;
37
+ animation-fill-mode: forwards;
38
+ }
39
+
40
+ .fadeIn {
41
+ animation-name: fadeIn;
42
+ animation-duration: 0.5s;
43
+ animation-delay: 1s;
44
+ animation-fill-mode: forwards;
45
+ }
46
+
47
+ @keyframes fadeOut {
48
+ 0% {
49
+ opacity: 0;
50
+
51
+ }
52
+
53
+ 100% {
54
+ opacity: 1;
55
+ }
56
+
57
+ }
58
+
59
+ @keyframes fadeIn {
60
+ 0% {
61
+ opacity: 1;
62
+
63
+ }
64
+
65
+ 100% {
66
+ opacity: 0;
67
+ }
68
+
69
+ }
70
+ </style>
71
+ </head>
72
+
73
+ <body>
74
+ <div class="swiper-container">
75
+ <!-- Additional required wrapper -->
76
+
77
+ <div class="swiper-wrapper">
78
+ <div class="fade fadeOut"></div>
79
+ <div class="swiper-slide">
80
+ <div class="slide-img"><img src="https://dummyimage.com/600x400/0009ff/fff&text=1" alt=""></div>
81
+ </div>
82
+ <div class="swiper-slide">
83
+ <div class="slide-img"><img src="https://dummyimage.com/600x400/0009ff/fff&text=2" alt=""></div>
84
+ </div>
85
+ <div class="swiper-slide">
86
+ <div class="slide-img"><img src="https://dummyimage.com/600x400/0009ff/fff&text=3" alt=""></div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
91
+ <script>
92
+
93
+ const SwiperStart = new Swiper('.swiper-container', {
94
+ loop: true,
95
+ effect: "fade",
96
+ autoplay: {
97
+ delay: 4000,
98
+ },
99
+ speed: 2000
100
+ })
101
+
102
+ const fadeItem = document.getElementsByClassName("fade");
103
+
104
+ fadeItem[0].addEventListener('animationend', () => {
105
+ const fade = document.getElementsByClassName("fade")[0];
106
+ if (fade.classList.contains("fadeOut")) {
107
+ fade.style.opacity = 1;
108
+ fade.classList.remove("fadeOut");
109
+ fade.classList.add("fadeIn")
110
+
111
+ } else {
112
+ fade.style.opacity = 0;
113
+ fade.classList.remove("fadeIn");
114
+ fade.classList.add("fadeOut")
115
+ }
116
+
117
+ });
118
+
119
+
120
+
121
+
122
+
123
+ </script>
124
+ </body>
125
+
126
+ </html>
127
+ ```