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