swiper.jsのフェード動作の件で

swiper.jsのフェードの動作において、画像切替時に、一旦ブラックアウトするようにする事はオプション設定で
出来ますでしょうか？

動作的には、
http://zengenji.jp/
こちらのサイトのスライダーのようなイメージになります。
上記サイトは、bx-sliderを使用はしておりますが。

よろしくお願いいたします。

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

回答1件

スライダーの背景色をcssで黒にしたら出来ます。
と思ったら出来ませんでした。
optionを色々と調べたんですが出来ませんでした。
仕方がないのでcssAnimationをJavascriptで追加して対応しました。

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

投稿2021/01/14 02:25

編集2021/01/19 17:01

Jon_do

総合スコア1373

niccha

2021/01/14 02:29

はい、それは試みたのですが、ならなかったんですよね。

niccha

2021/01/20 00:06

ありがとうございます！一旦黒くなり、次の画像が表示されました。ただ元々いれてるCSSの影響でしょうか、一旦次の画像が表示されて、１回点滅してまた表示という感じの動作になってしまいました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

swiper.jsのフェード動作の件で

関連した質問