bxslider slide align center

Question

I'am trying to make slider which is view align center. And the center slide should be in center of the red line(div)

This is what I tried. 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>

Please help

Answer 1

This should fix your problem:

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

Updated fiddle.