bxSlider with left and right images view port half and full middle image

center image is slide to left, only half of its view port. next image comes to the center. next image of new centered image comes only its first half to the view port.

by Denis Tverdokhlebov

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<div class="bxslider">
    <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 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>

CSS

div.bxslider {
    margin-left: 25%;
    margin-right: 25%;
}

JavaScript

$(document).ready(function(){
  $('.bxslider').bxSlider({
    slideWidth: 900,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    pager: false,
    auto: true
  });
});