Reply To: Carousel / slider implementation

• [email protected]

• October 16, 2013 at 9:59 am

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.