jquery.bgswitcher.jsを使ってスライダーを作ってみました。
スライドショー使用の画像が表示されません。
jsはサイトからダウンロードをしてjsフォルダへ保存
画像bg1~3についてはjpg形式でimgフォルダへ保存
これらのフォルダはhtmlと同じ階層に保存してあります。
html自体はとてもシンプルで、jsを読み込み、、間違いなくimgを読み込めれば終了だと思うのですが、z-indexをゼロにしてみたり、min-heightを100vhにしてみたりと試してはみているものの、ブラウザを変更してみても駄目でした。
imgの表示方法が誤っているのかと見直してもみましたが、誤っていない様子です。
そこで、大変無知で申し訳ありませんが、客観的に見て頂いたほうが理解できるのではないかと思い、もしお分かりでしたら教えて頂けないでしょうか。
bgswitcher.jsを使用したスライダーのhtmlをそのままベタでコピーしています。他のサイトでも同じように作成されたいたので、特に敢えて修正しなければならない点はなさそうなのですが・・・どうぞ宜しくお願い致します。
<html lang="ja"> <head> <meta charset="UTF-8"> <title>abc</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="js/jquery.bgswitcher.js"></script> <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: [ "img/bg1.jpg", "img/bg2.jpg", "img/bg3.jpg" ], // 切替背景画像を指定 interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒 loop: true, //切り替えをループする shuffle: false, //背景画像の順番をシャッフルする effect: "fade", //エフェクトの種類 "fade" "blind" "clip" "slide" "drop" "hide" duration: 1000, //エフェクトの時間 1000=1秒 easing: "swing", //エフェクトのイージング "swing" "linear" }); }); </script> <style type="text/css"> body{margin:0} .bg-slider { width: 100vw; height: 100vh; background-position:center center; background-size: cover; display: flex; align-items: center; justify-content: center; } .bg-slider__title{ color: #fff; font-size: 48px; line-height: 1.5; text-align:center; text-shadow: 1px 1px 1px #000; } .bg-slider > div{ z-index: 0 !important;//背景が真っ白にならないように } </style> </head> <body> <div class="bg-slider"> <h1 class="bg-slider__title">ABC<br>【DEFAULT】</h1> </div> </body> </html> コード
回答1件
あなたの回答
tips
プレビュー