回答編集履歴

2

bgSwitcherについて、調べてヒントを追加しました。

2020/04/12 06:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -16,32 +16,66 @@
16
16
 
17
17
  ---
18
18
 
19
- そのほか、jQueryの述がないので、勘になりますが、
19
+ :
20
20
 
21
+
22
+
21
- 以下にすると解決するかもれません
23
+ 「bgSwitcher」について、詳しくないですが、ヒントになりそな点は見つけま
24
+
25
+ 1. オプション`start: false`で自動でアニメーションが開始されない
26
+
27
+ 2. `$(".bg-slider").bgswitcher('start');`で、アニメーションが開始される
28
+
29
+
30
+
31
+ 画像のローディングが終わったタイミングで、以下を呼び出すことができればやりたいことができると思います。
32
+
33
+ `$(".bg-slider").bgswitcher('start');`
22
34
 
23
35
 
24
36
 
25
37
  ```jquery
26
38
 
27
- $(function() {
39
+ jQuery(function ($) {
28
40
 
29
- // 内容
41
+ $(".bg-slider").bgSwitcher({
30
42
 
31
- });
43
+ images: [
32
44
 
33
- $(window).resize(function() {
45
+ "https://stat.ameba.jp/user_images/20170330/17/living-beauty-mie/24/11/j/o0740055513901884406.jpg?caw=800",
34
46
 
35
- // 内容
47
+ "https://natgeo.nikkeibp.co.jp/atcl/news/19/041600231/ph_thumb.jpg",
36
48
 
37
- });
49
+ "https://assets.media-platform.com/gizmodo/dist/images/2019/12/20/191219Mountaingorillas-w1280.jpg"
38
50
 
51
+ ], // 切替背景画像を指定
39
52
 
53
+ interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
40
54
 
41
- $(window).load(function() {
55
+ loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
42
56
 
57
+ shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する false=しない
58
+
59
+ effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
60
+
43
- // 上記「内容」こちらにコピーてみる
61
+ duration: 1000, // エフェクトの時間を指定ます。
62
+
63
+ easing: "linear", // エフェクトのイージングをlinear,swingから指定
64
+
65
+ start: false // 追加しました。自動でスライドショーが開始しないようにするオプションだそうです。
66
+
67
+ });
68
+
69
+
70
+
71
+ $(".bg-slider").bgswitcher('start'); // アニメーションが開始されます。コメントアウトして、スライドショーが開始されないことを確かめてみてください。
44
72
 
45
73
  });
46
74
 
47
75
  ```
76
+
77
+
78
+
79
+ 「bgSwitcher」のコールバック関数などに、画像のロードが終わったかどうかを確かめるものがないかを調べてみてください。
80
+
81
+ (bxSliderなど、他のスライドショーのプラグインではある仕組みなので、「bgSwitcher」にもあるのではないかと思います。)

1

jQueryによるアプローチの案も追加

2020/04/12 06:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -11,3 +11,37 @@
11
11
 
12
12
 
13
13
  `width: 100vw;`だと、いかがでしょうか?
14
+
15
+
16
+
17
+ ---
18
+
19
+ そのほか、jQueryの記述がないので、勘になりますが、
20
+
21
+ 以下のようにすると解決するかもしれません。
22
+
23
+
24
+
25
+ ```jquery
26
+
27
+ $(function() {
28
+
29
+ // 内容
30
+
31
+ });
32
+
33
+ $(window).resize(function() {
34
+
35
+ // 内容
36
+
37
+ });
38
+
39
+
40
+
41
+ $(window).load(function() {
42
+
43
+ // 上記「内容」こちらにコピーしてみる
44
+
45
+ });
46
+
47
+ ```