Blog Article

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

0 Comments
160
22 Dec 2018

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%;
}
0.0
Last Modified: Friday 18 January 2019 08:48
Advance custom Fields bxSlider

No Comments Yet...

Leave a reply

Your email address will not be published.