Creating a Slider With bxslider and ACF – Part 2

Posted on: May 6th, 2014

Now that you’ve got everything set up on the Dashboard side, it’s time to bring in your content from the template side.

ACF Functions

Advanced Custom Fields makes pulling your content in extremely easy. There are two main ways (taken from main ACF code examples page).

// 1. Display a field
the_field('field_name'); 

// 2. Retrieving a field as a variable
$variable = get_field('field_name');
echo $variable;

// how I'm pulling them in
$image 			= get_field('slider_image');
$image_content 	= get_field('slider_content');
$image2			= get_field('slider_image_2');
$image2_content = get_field('slider_content_2');
$image3			= get_field('slider_image_3');
$image3_content	= get_field('slider_content_3');

From there you can start using your custom fields anywhere in the page.

bxslider Setup

So we’ve enqueued the scripts and styles for bxslider, but how should we set it up. Well, much like bringing in ACF content, it’s quite simple. A little known fact about bxslider is that you don’t need to make everything an unordered list. You can just as easily use divs. For our example we’ll create bxslider in the following way.

<div class="bxslider gallery">
	<div class="slide">
		<img src="<?php echo $image; ?>" />		
		<div class="slide-content">
			<?php echo $image_content; ?>
		</div>
	</div>
	<div class="slide">
		<img src="<?php echo $image2; ?>" />		
		<div class="slide-content">
			<?php echo $image2_content; ?>
		</div>
	</div>
	<div class="slide">
		<img src="<?php echo $image3; ?>" />		
		<div class="slide-content">
			<?php echo $image3_content; ?>
		</div>
	</div>
</div>

You can see that I’m using the variable form of our ACF content in the example. That’s because I like to keep everything from ACF at the top of my page, directly after the loop starts. In terms of bxslider, I’ve created a very basic .bxslider, .slide setup. Now I can add any content inside my slide and bxslider will treat it as one slide.

The jQuery

All that is left really is one simple JS call.

jQuery(document).ready(function($) {
	$('.bxslider').bxSlider();
});

With that you can take a look at your page and you should have a fully operational content slider. In terms of the “out of box CSS” from bxslider, I like to get rid of the box-shadow, border, and left positioning from .bx-wrapper .bx-viewport, but that’s up to you. Here are a few more CSS bits I like to remove/use with bxslider.

.bx-wrapper {
	position: relative;
	margin: 0 auto; /* default has margin-bottom: 60px; */
	padding: 0;
	*zoom: 1;
}

.slide-content {
	position: absolute;
	bottom: 80px; /* pulls my slide content over top of the image instead of below */
	color: #fff;
	text-align: center;
	width: 100%;
}

.bx-wrapper .bx-pager {
	position: absolute;
	bottom: 50px; /* pulls the pager into the slider */
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #fff; /* default is #666 */
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #25b26a; /* default is #000 */
}

With that, you should now have a working slider. All that’s left is to create 3 duplicates (or however many you see fit) in your field group and echo those onto your page. I may end up creating a Part 3 with some more specific updates

previous post: Creating a Slider With bxslider and ACF – Part 1 next post: Getting Rid of Website Builder on GoDaddy