現在サイトを制作しているのですがそこでスライドショーを実装することになりました。プラグインを使わないでスライドショーの方を実装することになり調べるとこちらのサイトに書いてあったので参考にさせてもらったのですが動作はうまくいったのですが、画像のサイズが大きいので見切れてしまうのでレスポンシブを適応したいのですがうまくいきません。現在コードはこうなっています。
<!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件
あなたの回答
tips
プレビュー