I have this slider working now. Would have been a lot easier if there was clear documentation on how to do it. You have to go to http://flexslider.woothemes.com/ and get the files for the flexslider and put them in the appropriate spots in your theme.
I will paste my code below for you all that have the same question:
<!-- Start Photo Slider -->
<?php
/*
* Create the Markup for a slider
* This example will create the Markup for Flexslider (http://www.woothemes.com/flexslider/)
*/
$property_images = get_field('property_gallery');
if( $property_images ) { ?>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach( $property_images as $property_image ): ?>
<li>
<img src="<?php echo $property_image['url']; ?>" alt="<?php echo $property_image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
/*
* The following code creates the thumbnail navigation
*/
?>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $property_images as $property_image ): ?>
<li>
<img src="<?php echo $property_image['sizes']['thumbnail']; ?>" alt="<?php echo $property_image['alt']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
}else{
?><div id="single-gallery-image">
<?php the_post_thumbnail('full'); ?>
</div><?php
?>
<?php } ?>
<!-- End Photo Slider -->
</div>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
var $f = jQuery.noConflict(true);
$f(window).load(function() {
// The slider being synced must be initialized first
$f('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 75,
itemMargin: 5,
asNavFor: '#slider'
});
$f('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
I’m loading this with a jQuery.noConflict since I have another jQuery library loading on the site.
