一連の可変幅の画像があります。それらをカルーセルで回転させたいのですが、「carouFredSel」を選択しました。これは、私が見つけることができる最も構成可能なものと思われるためです。ブラウザで常に画像の1つを水平方向に中央に配置したい。したがって、従来のカルーセル画像はデフォルトで左揃えになりますが、ここでは、画像間に一貫した (10 ピクセル) のギャップを置いて、ビューの中央にある画像の周りに配置する必要があります。例を次に示します: http://coolcarousels.frebsite.nl/c/2/。これは固定幅の画像には最適ですが、私の画像は幅が可変です。この可変幅が問題です。
これを強調するために、簡単なモックアップを作成しました。コードは次のとおりです。
HTML:
<div class="strip">
<div id="carousel">
<div class="carousel-image">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="carousel-image">
<img src="http://placehold.it/117x200" alt="" />
</div>
<div class="carousel-image">
<img src="http://placehold.it/317x200" alt="" />
</div>
<div class="carousel-image">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="carousel-image">
<img src="http://placehold.it/317x200" alt="" />
</div>
<div class="carousel-image">
<img src="http://placehold.it/150x200" alt="" />
</div>
</div>
</div>
CSS:
.strip {
height: 210px;
background: #333;
overflow: hidden;
}
.carousel-image {
float: left;
width: 410px;
height: 306px;
text-align: center;
}
.carousel-image img {
float: left;
margin: 5px;
}
JS:
$(function () {
$('#carousel').carouFredSel({
width: '100%',
align: 'center',
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: 1000,
timeoutDuration: 3000
},
prev: '#prev',
next: '#next',
pagination: {
container: '#pager',
deviation: 1
}
});
});
フィドル: http://jsfiddle.net/qqBus/
「.carousel-image」の幅を削除すると、画像が隙間なく隣り合って配置されるという望ましい効果があることがわかりますが、中央の画像が中央に配置されなくなります。
私が探している効果を達成する方法を誰かが見つけられるかどうか疑問に思いましたか? そのようなプラグインが存在する場合、私は代替プラグインを受け入れますが、長い間懸命に探してきましたが、可変幅の画像で動作するものを見つけることができません!
ありがとうございます。