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

This code uses PHP, JavaScript and CSS to implement a slider using the bxSlider library. The Advance Custom Fields plugin is utilized to retrieve the images for the slider.

The PHP code checks if there are any rows in the slider custom field and loops through them to display the images. The JavaScript code sets up the slider with the bxSlider library, defining the slide width, number of slides to show, movement of slides, and enabling auto slide. The CSS code sets a margin on the left and right of the bxslider class to position the images in the middle of the page with half images displayed on both sides.

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%;
}