javascript - bxslider 滑动对齐中心

Question

我正在尝试制作 View 对齐中心的 slider 。并且中心幻灯片应该在红线的中心(div)

这是我试过的。 https://fiddle.jshell.net/4xgpgng1/1/

<style>
div.bxslider { margin:0 50%; text-align:center; }
.slide{  width: initial !important; margin: 0px 20px ;   }
.slide img { width: 130px;  }
</style>


<div style="position:absolute; width:140px; height:100px; border:1px solid red; margin:0 0 0 -70px; top:0;left:50%;z-index:2"></div>

<div class="bxslider">
    <div class="slide a1"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/435ab6/ffffff?text=FooBar3" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/11cc22/ffffff?text=FooBar4" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ffa500/ffffff?text=FooBar5" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/cc44ff/ffffff?text=FooBar6" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
    <div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>  
</div>


<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
    slideWidth: 130,
    minSlides: 12,
    maxSlides: 12,
    moveSlides: 1,
    pager: false,
    auto: false
  });
}); 
</script>

请帮忙

Answer 1

这应该可以解决您的问题:

.slide img {
  position: relative;
  left: calc(50% + 20px);
}

Updated fiddle .