title: bxslider slide align center
body: <p>I'am trying to make slider which is view align center. And the center slide should be in center of the red line(div)</p>
  
  <p>This is what I tried. <a href="https://fiddle.jshell.net/4xgpgng1/1/" rel="nofollow noreferrer">https://fiddle.jshell.net/4xgpgng1/1/</a></p>
  
  <pre><code>&lt;style&gt;
  div.bxslider { margin:0 50%; text-align:center; }
  .slide{  width: initial !important; margin: 0px 20px ;   }
  .slide img { width: 130px;  }
  &lt;/style&gt;
  
  
  &lt;div style="position:absolute; width:140px; height:100px; border:1px solid red; margin:0 0 0 -70px; top:0;left:50%;z-index:2"&gt;&lt;/div&gt;
  
  &lt;div class="bxslider"&gt;
      &lt;div class="slide a1"&gt;&lt;img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/435ab6/ffffff?text=FooBar3" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/11cc22/ffffff?text=FooBar4" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/ffa500/ffffff?text=FooBar5" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/cc44ff/ffffff?text=FooBar6" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /&gt;&lt;/div&gt;  
  &lt;/div&gt;
  
  
  &lt;script&gt;
  $(document).ready(function(){
    $('.bxslider').bxSlider({
      slideWidth: 130,
      minSlides: 12,
      maxSlides: 12,
      moveSlides: 1,
      pager: false,
      auto: false
    });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help</p>