###実現したいこと
Slickにて、ブラウザ幅を伸縮した際に画像の横幅を固定したままで、かつ前後のイメージを見せつつセンタリングにしたいです。
イメージで言うと、まさに**湾岸通ギャラリー(http://www.caso-gallery.jp/)**がそうです。
今現在の下記のコードでは、横幅の変化にあわせ画像も伸縮してしまい困っています。
max-widthやmin-widthを設定してはどうかと思い、slick-slideにて設定してみましたが、どうにもうまく行きませんでした。
よろしければ、お力添えをお願いします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=1214, user-scalable=yes" > <link rel="stylesheet" href="/css/slick.css" type="text/css"> <link rel="stylesheet" href="/css/slick-theme.css" type="text/css"> <link rel="stylesheet" href="/css/base.css" type="text/css"> <script type="text/javascript" src="/js/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script> $(function(){ $('.hoge_slide').slick({ infinite: true, dots: true, pauseOnHover:true, arrows:false, slidesToShow: 3, centerMode: true, centerPadding: '0px', }); }); </script> </head> <div id="contents"> <p class="tes">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <div class="hoge"> <div class="hoge_slide"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> </div> </div> </div> </body> </html>
###BaseCSS
div#contents{ width : 100%; background : #FFFFFF; margin : 0px auto; } div.hoge{ width : 100%; padding : 0px; margin : 0px auto 0px auto; border-bottom : solid 1px #d8d8d8; background : url(/img/bg.png) repeat-x; background-origin : content-box; } div.hoge_slide{ width : 100%; padding : 0px; margin : 0px auto 0px auto; } .slick-slide{ margin :0px 5px; } p.tes{ width : 1024px; margin : 0px auto; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。