Question

我正在努力让幻灯片在包装器中居中对齐。我的旋转木马可以有动态数量的幻灯片，因此可能无法填充包装纸的宽度。它们默认对齐，但我需要它们居中对齐。有人可以帮忙吗？

我创建了一个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>

Answer 1

您可以查看更新的小提琴 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");
  }
});

中心对齐旋转木马内的动态幻灯片（BXSlider）

1 个答案: