0
私はCycle2のカルーセルプラグインを使用しています私のすべての画像の幅が違うので画像を中央に配置したいのですが、私の親ラッパーの幅が900px(例えば)中央に配置されるよりも900pxではありませんか?中央のスライド画像
私のイメージは何もしないよりも、900pxよりも大きな(中心にしていない)が、
$(document).ready(function(){
$('.mySlideShow').cycle({
next: "#single-right",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
prev: "#single-left",
});
});
.single-gallery{
width:800px;
height:640px;
position:relative;
}
.cycle-slideshow img {
height:494px;
width:auto;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
<div class="mySlideShow">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
<img src="https://cdn.pixabay.com/photo/2017/01/07/20/40/candy-1961536_960_720.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img src="https://cdn.pixabay.com/photo/2017/01/11/11/33/cake-1971552_960_720.jpg">
<img src="https://www.w3schools.com/w3css/img_avatar3.png">
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
</div>
「900px」よりも大きな画像をセンターに配置しないのはなぜですか。スニペットの例では、小さな画像が表示されません。 – Ionut
スニペットには同じサイズのすべての画像が含まれています。 –
すべての画像はありませんwidhは異なるサイズです –