旋轉木馬中的動態幻燈片中心對齊（BXSlider）

我正在努力讓幻燈片在包裝中居中對齊。我的傳送帶可以有一個動態數量的幻燈片，因此可能無法填充包裝的寬度。它們默認對齊，但我需要它們居中對齊。誰能幫忙？旋轉木馬中的動態幻燈片中心對齊（BXSlider）

我創建了一個的jsfiddle顯示我的問題：http://jsfiddle.net/ysuf1u1p/2/

.bxslider-inner { 
    display: inline-block; 
    float:none !important; 
    margin: 0 auto; 
} 

.bx-wrapper { 
    max-width: 460px!important; 
    text-align:center; 
} 

<ul class="bxslider"> 
    <li class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;">1</div></li> 
<li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">2</div></li> 
    <li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">3</div></li> 
</ul> 

<script> 
jQuery(document).ready(function(){ 
    jQuery('.bxslider').bxSlider({ 
    mode: 'horizontal', 
    speed: 500, 
    slideMargin:10, 
    infiniteLoop: false, 
    pager: false, 
    controls: true, 
    slideWidth: 80, 
    minSlides: 1, 
    maxSlides: 5, 
    moveSlides: 1  
     }); 
    }); 

</script>

來源

2017-01-20 LeeTee

您可以檢查更新的小提琴FIDDLE

$(".bxslider").each(function(){ 
    var nextDisabled = $(this).parents(".bx-wrapper:eq(0)").find(".bx-next").hasClass('disabled'); 
    var prevDisabled = $(this).parents(".bx-wrapper:eq(0)").find(".bx-prev").hasClass('disabled'); 
    if(nextDisabled && prevDisabled) 
    { 
    $(this).css("display","inline"); 
    } 
});

來源

2017-01-20 12:46:58

我錯過了什麼？幻燈片不居中。你的代碼究竟做了什麼？ – zer00ne

@ zer00ne其中心按照OP要求對齊。你可以在回答中檢查jsfiddle。 –

爲什麼downvote它呢？ –

旋轉木馬中的動態幻燈片中心對齊（BXSlider）

回答

相關問題