Reply To: Carousel / slider implementation

• jadejd

• February 14, 2014 at 12:42 am

Im not sure if i have done this right or not its on the following page surposed to be in the side bar http://dev.rgbdesignuk.com/memorial/test-test/

but its not showing up please help

<!--slider starts-->
             <!-- 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('gallery');
if( $property_images ) { ?>
<div id="slider" class="flexslider">
  <ul class="slides">
    <?php foreach( $property_images as $property_image ): ?>
      <li>
        <img src="<?php echo $gallery_image['url']; ?>" alt="<?php echo $gallery_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( $gallery_images as $gallery_image ): ?>
      <li>
        <img src="<?php echo $gallery_image['sizes']['thumbnail']; ?>" alt="<?php echo $gallery_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="http://dev.rgbdesignuk.com/wp-content/themes/canvas-child/memorials/css/flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://dev.rgbdesignuk.com/wp-content/themes/canvas-child/memorials/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> 
             <!--slider ends-->