Q&A
前提・実現したいこと
HTML,CSS,JSでホームページ作成中です。
jsで画像がスライドショーになるように設定したところ、画像の位置がおかしく、さらに画像サイズの変更がおかしくなりました。解決方法を教えていただきたいです。よろしくお願いいたします。
発生している問題・エラーメッセージ
該当のソースコード
HTML <head> <meta charset = "UTF-8"> <title>デザイン練習</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script src="main.js"></script> </head> <body> <div class="header"> ～～～～～略～～～～～ </div> <div class= "slider"> <img src="top.jpg" width="1120px" alt=""> <img src="top2.jpg" width="1120px" alt=""> <img src="top3.jpg" width="1120px" alt=""> <img src="top4.jpg" width="1120px" alt=""> </div> </body> --------------------------------- js $(document).ready(function(){ $('.slider').bxSlider({ auto: true, pause: 3000, }); });
試したこと
jmgにクラス名をつけてcssから画像サイズを変更しましたがそれでも何も起こらなかったです。
スライドショー機能の部分のjs，HTMLを消去したら元に戻り、ヘッダーの下に画像が来て、画像のサイズ変更が適用されました。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
bxSlider はデフォルトでは画像サイズは画面幅になりますが、固定サイズにしたいということでしょうか。
だとしたら、slideWidthオプションで指定することになります。
js
1$(document).ready(function(){ 2 $('.slider').bxSlider({ 3 auto: true, 4 pause: 3000, 5 slideWidth: 1120, 6 }); 7});
位置は左寄せになりますので、もし、中央に配置したいということなら、下記のCSSを追加すればいいでしょう。
css
1.bx-wrapper { 2 margin: 0 auto !important; 3}
投稿2021/04/26 05:24
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/26 05:58
2021/04/26 06:24
2021/04/26 06:37