大きさの違うというのは、縦横のpx等が違うということです。
大きい画像をスライダーにいれた時、小さい画像は上に寄ってしまいます。
自分はそれをど真ん中に持ってきたいのですが、どうすればよろしいでしょうか?
lang
1<script> 2 $(function(){ 3 $('.slider').bxSlider({ 4 auto: true, 5 infiniteLoop: true, 6 speed: 1000, 7 maxsliders:3, 8 minsliders:3, 9 moveSlides: 1, 10 slideMargin:30 11 }); 12}); 13</script> 14
lang
1<center> 2 <div id="bxwrap"> 3 <ul class="slider"> 4 <li class="slide"><img src="hoge".gif"></li> 5 <li class="slide"><img src="hoge.gif"></li> 6 <li class="slide"><img src="hoge.png"></li> width,height:300px 7 <li class="slide"><img src="hoge.png"></li>//width1280px height800px 8 </ul> 9 </div> 10 </center>
lang
1.slider { 2 list-style: none; 3 margin: 0; 4 padding: 0; 5 } 6.bx-wrapper { 7 position: relative; 8 margin: 0 auto 60px; 9 padding: 0; 10 *zoom: 1; 11} 12 13.bx-wrapper img { 14 max-width: 100%; 15 display: block; 16} 17 18/** THEME 19===================================*/ 20.bx-wrapper .bx-viewport { 21 -moz-box-shadow: 0 0 5px #ccc; 22 -webkit-box-shadow: 0 0 5px #ccc; 23 box-shadow: 0 0 5px #ccc; 24 border: 5px solid #fff; 25 left: -5px; 26 background: #fff filter:alpha(opacity=50) //透明指定 27 -moz-opacity: 0.5 //透明指定 28 opacity: 0.5; //透明指定 29 30 /*fix other elements on the page moving (on Chrome)*/ 31 -webkit-transform: translatez(0); 32 -moz-transform: translatez(0); 33 -ms-transform: translatez(0); 34 -o-transform: translatez(0); 35 transform: translatez(0); 36} 37 38.bx-wrapper .bx-pager, 39.bx-wrapper .bx-controls-auto { 40 position: absolute; 41 bottom: -30px; 42 width: 100%; 43} 44
その他のCSSは公式から持ってきた物です。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/19 00:48
2015/07/20 14:28