Advance custom Fields bxSlider full middle image and a half left and right images

Beautiful and simple bxSlider full middle image and a half left and right images. To make it easier for a customer to use I added Advance custom Fields.

Advance Custom Fields. 
<section>
<?php if ( have_rows( 'slider' ) ) : ?>
 <?php while ( have_rows( 'slider' ) ) : the_row(); ?>
    <div class="bxslider">
    <?php if ( get_sub_field( 'images' ) ) { ?>
 <img src="<?php the_sub_field( 'images' ); ?>" />
 <?php } ?>
    </div>
 <?php endwhile; ?>
<?php else : ?>
 <?php // no rows found ?>
<?php endif; ?>
</section>

Java Script  
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
    slideWidth: 800,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    pager: false,
    auto: true
  });
});
</script>

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