"Slider with thumbnail slider(navigation)"

• gabi83f

• January 4, 2016 at 4:08 am

I’m trying to work with “The gallery field”.

I tried to create “Slider with thumbnail slider(navigation)”

link in this demo

http://flexslider.woothemes.com/thumbnail-slider.html

I used “The gallery field” Documentation

http://www.advancedcustomfields.com/resources/gallery/


This example shows how to display the images in the markup required for a WooThemes Flexslider to work

<?php

$images = get_field('gallery');

if( $images ): ?>
<div id="slider" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>

• " alt="<?php echo $image['alt']; ?>" />
  <p><?php echo $image['caption']; ?></p>

<?php endforeach; ?>

</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<?php foreach( $images as $image ): ?>

 

• " alt="<?php echo $image['alt']; ?>" />

 

<?php endforeach; ?>

</div>
<?php endif; ?>

and this java script:

$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});


But I have a problem just Carousel (thumbnail slider navigation) slider Works.
How do I solve it?
Thanks

• James

• January 7, 2016 at 6:57 pm

Hi there,

Could you please check the JS Console for any error messages on the page? Also, could you please use the code tag for your code?

Thanks!

• gabi83f

• January 9, 2016 at 4:31 am

This reply has been marked as private.

• James

• January 11, 2016 at 5:49 pm

Hi Gabi,

It means there is a conflict between Flexslider and your theme. It can be how you include the script. You can check the JS console on Google Chrome to check the error. For something like this, please ask Flexslider support and provide them with the error messages.

I hope this helps.

• gab1982

• April 19, 2016 at 7:23 pm

Hi James,
Sorry to jump on someone elses topic but I am also having the same issue, after some testing I found out the slider carousel works fine with static HTML however when I introduce the ACF foreach loop it doesn’t like it, I checked firebug but I have no javascript errors.

Regards
Graham

• James

• April 20, 2016 at 2:14 pm

Hi @gab1982

Could you please share the static HTML code and the PHP code where you used ACF? Also, could you please share it in a new thread as this thread has a formatting issue that makes it looks broken.

Thanks!

• gab1982

• April 22, 2016 at 9:40 pm

Hi @James,
OK I have done that here: https://support.advancedcustomfields.com/forums/topic/flexslider-not-syncing-with-dynamic-items/