Remember to download and install the FlexSlider plugin.
Next, add the following to your functions.php file. (The code assumes that all of your FlexSlider files are in a directory called ‘flexslider’. If you put yours somewhere else, update the file path accordingly.
/* Enqueue FlexSlider
function srg_add_flexslider() {
wp_enqueue_script(
'flexslider',
get_stylesheet_directory_uri() . '/flexslider/jquery.flexslider.js',
array('jquery')
);
wp_enqueue_script(
'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
wp_register_style(
'flexslider-style',
get_stylesheet_directory_uri() . '/flexslider/flexslider.css'
);
wp_enqueue_style( 'flexslider-style' );
}
add_action('wp_enqueue_scripts', 'srg_add_flexslider');
Then create a page template (I called mine page_flexslider.php) with the following code. (Don’t forget the initial php tag–it doesn’t want to display properly here.)
/*
Template Name: Page with Flexslider
*/
add_action('genesis_entry_content', 'acf_slider_loop', 8);
function acf_slider_loop() {
$images = get_field('image_gallery');
if( $images ):
echo '<div id="slider" class="flexslider">';
echo '<ul class="slides">';
foreach( $images as $image ):
echo '<li>';
echo '<img src="'.$image['url'].'" alt="'.$image['alt'].'" />';
echo '<p>'.$image['caption'].'</p>';
echo '</li>';
endforeach;
echo '</ul>';
echo '</div>';
endif;
}
Finally, to make the script run on the page, add the following to the ‘scripts’ metabox. Make sure you use the no-conflict “jQuery” instead of “$”.
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider();
slideshowSpeed: 8000
});
</script>
genesis();