bgswitcherがうまく読み込まれない

前提・実現したいこと

bgswitcherを使用して背景画像をスライドさせたいのですが、読み込んだ時点では全く表示されず（左端に小さく表示or全くでない）にWindowサイズを変更したときのみ表示されるようになってしまいます。読み込んだ時点で、表示されるようにしたいです。
助言いただければ幸いです。

該当のソースコード

html
1   <body bgcolor="35495e">
2        <!--loading-->
3        <div class="breeding-rhombus-spinner">
4            <div class="rhombus child-1"></div>
5            <div class="rhombus child-2"></div>
6            <div class="rhombus child-3"></div>
7            <div class="rhombus child-4"></div>
8            <div class="rhombus child-5"></div>
9            <div class="rhombus child-6"></div>
10            <div class="rhombus child-7"></div>
11            <div class="rhombus child-8"></div>
12            <div class="rhombus big"></div>
13        </div>
14        <!--Top-->
15        <div id=top>
16            <div class="bg-slider">
17                <div class='ng-text'>
18                    <div id=logo>
19                        <h1>YKB</h1>
20                    </div>
21                    <p id=p1><span id="ityped"></span></p>
22                    <p id=p1><span><a class="button" href="#main">What's YKB</a></span>
23                    <span><a class="button" href="#">Portfolio</a></span>
24                    <span><a class="button" href="#">About us</a></span></p>
25                    <br>
26                    <br>
27                </div>
28            </div>
29        </div>
30

css
1/*==================loading design========================*/
2.breeding-rhombus-spinner {
3    height: 65px;
4    width: 65px;
5    position: relative;
6    transform: rotate(45deg);
7    margin-top:25%; 
8    margin-left:auto;
9    margin-right:auto;
10  }
11.breeding-rhombus-spinner, .breeding-rhombus-spinner * {
12    box-sizing: border-box;
13  }
14.breeding-rhombus-spinner .rhombus {
15    height: calc(65px / 7.5);
16    width: calc(65px / 7.5);
17    animation-duration: 2000ms;
18    top: calc(65px / 2.3077);
19    left: calc(65px / 2.3077);
20    background-color: #ff1d5e;
21    position: absolute;
22    animation-iteration-count: infinite;
23  }
24.breeding-rhombus-spinner .rhombus:nth-child(2n+0) {
25     margin-right: 0;
26   }
27.breeding-rhombus-spinner .rhombus.child-1 {
28    animation-name: breeding-rhombus-spinner-animation-child-1;
29    animation-delay: calc(100ms * 1);
30  }
31.breeding-rhombus-spinner .rhombus.child-2 {
32    animation-name: breeding-rhombus-spinner-animation-child-2;
33    animation-delay: calc(100ms * 2);
34  }
35.breeding-rhombus-spinner .rhombus.child-3 {
36    animation-name: breeding-rhombus-spinner-animation-child-3;
37    animation-delay: calc(100ms * 3);
38  }
39.breeding-rhombus-spinner .rhombus.child-4 {
40    animation-name: breeding-rhombus-spinner-animation-child-4;
41    animation-delay: calc(100ms * 4);
42  }
43.breeding-rhombus-spinner .rhombus.child-5 {
44    animation-name: breeding-rhombus-spinner-animation-child-5;
45    animation-delay: calc(100ms * 5);
46  }
47.breeding-rhombus-spinner .rhombus.child-6 {
48    animation-name: breeding-rhombus-spinner-animation-child-6;
49    animation-delay: calc(100ms * 6);
50  }
51.breeding-rhombus-spinner .rhombus.child-7 {
52    animation-name: breeding-rhombus-spinner-animation-child-7;
53    animation-delay: calc(100ms * 7);
54  }
55.breeding-rhombus-spinner .rhombus.child-8 {
56    animation-name: breeding-rhombus-spinner-animation-child-8;
57    animation-delay: calc(100ms * 8);
58  }
59.breeding-rhombus-spinner .rhombus.big {
60    height: calc(65px / 3);
61    width: calc(65px / 3);
62    animation-duration: 2000ms;
63    top: calc(65px / 3);
64    left: calc(65px / 3);
65    background-color: #ff1d5e;
66    animation: breeding-rhombus-spinner-animation-child-big 2s infinite;
67    animation-delay: 0.5s;
68  }
69@keyframes breeding-rhombus-spinner-animation-child-1 {
70    50% {
71      transform: translate(-325%, -325%);
72    }
73  }
74@keyframes breeding-rhombus-spinner-animation-child-2 {
75    50% {
76      transform: translate(0, -325%);
77    }
78  }
79@keyframes breeding-rhombus-spinner-animation-child-3 {
80    50% {
81      transform: translate(325%, -325%);
82    }
83  }
84@keyframes breeding-rhombus-spinner-animation-child-4 {
85    50% {
86      transform: translate(325%, 0);
87    }
88  }
89@keyframes breeding-rhombus-spinner-animation-child-5 {
90    50% {
91      transform: translate(325%, 325%);
92    }
93  }
94@keyframes breeding-rhombus-spinner-animation-child-6 {
95    50% {
96      transform: translate(0, 325%);
97    }
98  }
99@keyframes breeding-rhombus-spinner-animation-child-7 {
100    50% {
101      transform: translate(-325%, 325%);
102    }
103  }
104@keyframes breeding-rhombus-spinner-animation-child-8 {
105    50% {
106      transform: translate(-325%, 0);
107    }
108  }
109@keyframes breeding-rhombus-spinner-animation-child-big {
110    50% {
111      transform: scale(0.5);
112    }
113  }
114/*=======================image scroll=========================*/
115.bg-slider {
116	width:100%;
117        height:80%;
118	background-position:center center;
119	background-size: cover;
120	display: flex;
121	align-items: center;
122	justify-content: center;
123}
124/*=======================main design==========================*/
125div#top{
126    display: none;
127  }
128#logo{
129    color: #faf5e4;
130    font-size:120px;
131    font-family: 'Patua One', cursive;
132    text-align: center;
133  }
134div#main{
135    display: none;
136    font-family: 'Sawarabi Gothic', sans-serif;
137    color:#faf5e4;
138  }

js
1setTimeout(function() {     //loaging animation
2    $('.breeding-rhombus-spinner').fadeOut(1000);
3}, 3500);
4
5setTimeout(function() {     //logo animation
6    $('#footer').css('display', 'none').fadeIn(1500);
7    $('#main').css('display', 'none').fadeIn(1500);
8    $('#top').css('display', 'none').fadeIn(1500);
9    ityped.init(document.querySelector("#ityped"), {
10        backSpeed: 230,
11        typeSpeed: 190,
12        strings: ['...','abc home Page.']
13    })
14}, 4500);
15
16jQuery(function($) {
17    $('.bg-slider').bgSwitcher({
18        images: ['images/IMG_0851.jpg','images/DSC04067.jpg','images/IMG_6113.jpg'], // 切替背景画像を指定
19	interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
20        loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
21        shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
22        effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
23        duration: 1000, // エフェクトの時間を指定します。
24        easing: "linear" // エフェクトのイージングをlinear,swingから指定
25    });
26});
27

試したこと

widthをピクセルで指定するとうまく表示してくれます。％やautoだとダメなようで、この違いがよくわかりません。
数秒アニメーションを表示する→アニメーションをフェードアウト→全体を表示（この部分でbgswitcherがうまく表示されない）という流れです。
1日格闘してみましたが、自分には原因が究明できませんでした。

new1ro

2020/04/12 05:57

jQuery側の記述もいただけないでしょうか? 現状、手元で実行できないので回答の精度が落ちてしまったり、回答者の数が少なくなってしまっていると思います。

zakisima2001

2020/04/12 06:05

申し訳ございません。よろしくお願いいたします。 ```jQuery jQuery(function($) { $('.bg-slider').bgSwitcher({ images: ['images/IMG_0851.jpg','images/DSC04067.jpg','images/IMG_6113.jpg'], // 切替背景画像を指定 interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒 loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 1000, // エフェクトの時間を指定します。 easing: "linear" // エフェクトのイージングをlinear,swingから指定 }); }); ```

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

回答1件

以下の記述だと認識しました。

CSS
1.bg-slider {
2    width:100%;

width: 100vw;だと、いかがでしょうか?

追記:

「bgSwitcher」について、詳しくないのですが、ヒントになりそうな点は見つけました。

オプションstart: falseで自動でアニメーションが開始されない
$(".bg-slider").bgswitcher('start');で、アニメーションが開始される

画像のローディングが終わったタイミングで、以下を呼び出すことができればやりたいことができると思います。
$(".bg-slider").bgswitcher('start');

jquery
1jQuery(function ($) {
2  $(".bg-slider").bgSwitcher({
3    images: [
4      "https://stat.ameba.jp/user_images/20170330/17/living-beauty-mie/24/11/j/o0740055513901884406.jpg?caw=800",
5      "https://natgeo.nikkeibp.co.jp/atcl/news/19/041600231/ph_thumb.jpg",
6      "https://assets.media-platform.com/gizmodo/dist/images/2019/12/20/191219Mountaingorillas-w1280.jpg"
7    ], // 切替背景画像を指定
8    interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
9    loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
10    shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
11    effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
12    duration: 1000, // エフェクトの時間を指定します。
13    easing: "linear", // エフェクトのイージングをlinear,swingから指定
14    start: false // 追加しました。自動でスライドショーが開始しないようにするオプションだそうです。
15  });
16  
17  $(".bg-slider").bgswitcher('start'); // アニメーションが開始されます。コメントアウトして、スライドショーが開始されないことを確かめてみてください。
18});

「bgSwitcher」のコールバック関数などに、画像のロードが終わったかどうかを確かめるものがないかを調べてみてください。
(bxSliderなど、他のスライドショーのプラグインではある仕組みなので、「bgSwitcher」にもあるのではないかと思います。)

投稿2020/04/12 05:55

編集2020/04/12 06:49

new1ro

総合スコア4528

zakisima2001

2020/04/12 07:03

ありがとうございます。アニメーション自体は問題なく動いてくれるようです。しかし、本来であればページが表示された時点でトップの画像が表示されていてそこからアニメーションするかしなかだと思いますが、僕のコードだとそもそも画像ごと表示されないため困っています。ウインドウをリサイズしたあとはちゃんとアニメーションが機能して画像がスライドしてくれます。 bgswitcherはあきらめる方向でほかのプラグインも試してみます。