jCarouselLiteでwidth: 100%
jCarouselLiteを使用し、
.shopList内の<li>要素を横並びに並べたスライダーを作成しています。
<li>要素にwidth: 100%を指定し、
要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです）
<li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。
が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように
要素が付いてきません。
（リロードすれば指定位置である中央に戻るのですが……）
コードは以下の通りです。
<!------------------html内-------------------->
<head>
$(function() {
$(".shopList").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible : 1,
speed:800,
easing: "easeInOutCubic"
});
});
</head>
<body>
<div class="left"><div class="prev">
<img src="00000000g.png">
</div></div>
<div class="right"><div class="next">
<img src="00000000.png">
</div></div>
<div class="shopList">
<ul>
<li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li>
<li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li>
<li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li>
<li><img src="444444.jpg" width="000" height="000" class="productimg"/></li>
<li><img src="555555.jpg" width="000" height="000" class="productimg"/></li>
<li><img src="666666.jpg" width="000" height="000" class="productimg"/></li>
</ul>
</div>
</body>
<!------------------css設定-------------------->
.left {
position: absolute;
margin: 0;
padding: 0;
width: 20px;
height: 34px;
top: 250px;
left: 30px;
z-index: 11; /* 重なる順番 */
cursor: pointer;
}
.right {
position: absolute;
margin: 0;
padding: 0;
width: 20px;
height: 34px;
top: 250px;
right: 30px;
z-index: 10; /* 重なる順番 */
cursor: pointer;
}
.shopList {
width: 100%;
position: relative;
margin: 0;
padding: 0;
height: 520px;
}
.shopList ul,
.shopList ul li {
margin: 0;
padding: 0;
float: left;
display: inline;
overflow: hidden;
width: 100%;
}
.productimg {
display: block;
margin-left: auto;
margin-right: auto;
}
<li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。
よろしくお願いします。
お礼
そうなんですね。おっしゃる様にすることで、思いの通りの表示ができました。 大変助かりました。