2017-03-15 14 views
0

私はCycle2のカルーセルプラグインを使用しています私のすべての画像の幅が違うので画像を中央に配置したいのですが、私の親ラッパーの幅が900px(例えば)中央に配置されるよりも900pxではありませんか?中央のスライド画像

私のイメージは何もしないよりも、900pxよりも大きな(中心にしていない)が、

は私がイメージ enter image description here

$(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よりも私のイメージが小さい場合ならば、私は意味

+0

「900px」よりも大きな画像をセンターに配置しないのはなぜですか。スニペットの例では、小さな画像が表示されません。 – Ionut

+0

スニペットには同じサイズのすべての画像が含まれています。 –

+0

すべての画像はありませんwidhは異なるサイズです –

答えて

1

このコードを試してみてください

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet" /> 


<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> 

DEMO

+0

基本的でありがとう! –