Q&A
コード中に画像がありませんが、どこにあるのでしょうか。
現在サイトを制作しているのですがそこでスライドショーを実装することになりました。プラグインを使わないでスライドショーの方を実装することになり調べるとこちらのサイトに書いてあったので参考にさせてもらったのですが動作はうまくいったのですが、画像のサイズが大きいので見切れてしまうのでレスポンシブを適応したいのですがうまくいきません。現在コードはこうなっています。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ポートフォリオサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/jquery-ui.min.css"> <link rel="stylesheet" href="./css/simple.css"> </head> <body> <div class="main"> <div class="container"> <div class="slider" > <div class="slideSet" width="100%"> <div class="slide"> <img src="./imgs/sample1.img" width="100%" alt=""> </div> <div class="slide"> <img src="./imgs/sample2.img" width="100%" alt=""> </div> <div class="slide"> <img src="./imgs/sample3.img" width="100%" alt=""> </div> <div class="slide"> <img src="./imgs/sample4.img" width="100%" alt=""> </div> <div class="slide"> <img src="./imgs/sample5.img" width="100%" alt=""> </div> </div> <span class="glyphicon glyphicon-glyphicon glyphicon-chevron-left slider-back" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-glyphicon glyphicon-chevron-right slider-next" style="font-size: 50px;"></span> </div> </div> </div> <script src="jquery-2.1.3.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="contents.js"></script> </body> </html>
.main { width:100%; } .container { margin-right:auto; margin-left:auto; } .slider { width: 920px; height: 600px; overflow: hidden; position: relative; margin:auto; } .slider .slideSet { position: absolute; } .slider .slide { width: 918px; height: auto; float: left; } .slider-next .slider-back { position:absolute; }
// .slideの幅を取得して代入 var slideWidth = $('.slide').outerWidth(); // .slideの数を取得して代入 var slideNum = $('.slide').length; // .slideの幅×数で求めた値を代入 var slideSetWidth = slideWidth * slideNum; // .slideSetのスタイルシートにwidth: slideSetWidthを指定 $('.slideSet').css('width', slideSetWidth); // 現在地を示す値 var slideCurrent = 0; // アニメーションを実行する独自関数 var sliding = function() { // ループ処理の条件開始 if(slideCurrent < 0) { slideCurrent = slideNum =1; }else if(slideCurrent >= slideNum){ slideCurrent = 0; } //アニメーションを止める $('.slideSet').stop().animate({ left: slideCurrent * -slideWidth }); } // 前ボタンが押された時 $('.slider-back').click(function() { slideCurrent--; sliding(); }); // 次へボタンが押されたとき $('.slider-next').click(function() { slideCurrent++; sliding(); });
試したこと：
cssの方に```
.slideSet
{
width: 100%;
max-width: 100%;
height:600px；
}
どなたか原因と解決策を知りたいです。ご教授お願いします
回答2件
0
ベストアンサー
原因と解決策
.slideSet を「すべてのスライドを足した幅」にするタイプのスライダーなのに、その幅をCSS固定するのが縦に並ぶ原因です。
Bootstrap を使っているならスライドショーもあるので、そちらを使われた方が良いです。
(v3↓)
【スライドショー carousel | Javascript | Bootstrap3の使い方】
http://bootstrap3-guide.com/javascript/carousel.html
【JavaScript · Bootstrap】
http://getbootstrap.com/docs/3.3/javascript/#carousel
(v4↓)
【Carousel · Bootstrap】
https://getbootstrap.com/docs/4.0/components/carousel/
投稿2018/04/20 02:28
総合スコア69398
bootstrapにスライドショーがあったことを知りませんでした。教えてもらいありがとうございました。
今回はbootstrapで実装することにしました。
0
img要素にobject-fit: contain;(丁度img要素の範囲に収まるように画像を表示する)を設定するとか？
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
※画像サイズをImage.naturalWidth/naturalHeight判定してobject-fitを適用するかどうかを判定させたほうが良いかもしれません.
投稿2018/04/19 20:51
総合スコア4756
object-fitを使用してもうまくいきませんでした。bootstrapにはスライドショーの機能があるそうなのでそれで実装してみようと思います。
あなたの回答
tips
プレビュー
