asNavFor - click on thumb not working

[mmjaeger]

hello this really drives me nuts - everything looks nice and works fine but the click events on the thumbnails don't do anything - anyway to debug this and figure out what's going on - hope somebody has an idea how to fix this - thanks

this is my code:

var galleryEl       = $( '.flickity-gallery[data-id=' + id + ']' );
var galleryNavEl    = $( '.flickity-gallery-nav[data-id=' + id + ']' );

// Main gallery
$( galleryEl ).flickity({
    autoPlay:       false,
    //imagesLoaded: true,
    //lazyLoad:     2,
    pageDots:       false
});

// Thumbnail nav
$( galleryNavEl ).flickity({
    asNavFor:           '.flickity-gallery-6666',
    cellAlign:          'center',
    contain:            true,
    pageDots:           false,
    wrapAround:         true
});

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[mmjaeger]

this is basically my code: http://codepen.io/anon/pen/aOgLgd - same here - click event on thumbnail doesn't work

[desandro]

Thanks for that. Looks like the issue was that you set asNavFor to a jQuery object. Try setting it just to the selector string. See demo http://codepen.io/desandro/pen/RPzjGM

asNavFor:           '.gallery',

[mmjaeger]

That did the trick - as I'm getting the gallery element by data attribute like: var galleryEl = $( '.flickity-gallery[data-id=' + id + ']' ); var galleryNavEl = $( '.flickity-gallery-nav[data-id=' + id + ']' );

I had to find a workaround and put the id also into the class name as I have multiple sliders on the page - I think it should be possible to pass an object as well and not only the class name - maybe something for the next version? - thanks for your help.

[mmjaeger]

One last question please - as the gallery code is loaded using ajax, the main pictures is not visible, only the thumbnails - when I resize the page, the main picture becomes visible - what to I need to do to fix this?

slider.flickity( 'resize' ); does not do the trick

On Thu, Aug 20, 2015 at 1:21 PM, David DeSandro notifications@github.com wrote:

Thanks for that. Looks like the issue was that you set asNavFor to a jQuery object. Try setting it just to the selector string. See demo http://codepen.io/desandro/pen/RPzjGM

asNavFor: '.gallery',

— Reply to this email directly or view it on GitHub https://github.com/metafizzy/flickity/issues/218#issuecomment-133159690.

Marco M. Jaeger http://net4visions.com

[minemindmedia]

Hi, I'm having a similar issue and can't quite narrow it down.

var main = document.querySelector('.property-carousel');
var flickityone = new Flickity( main, {
  // options
  cellAlign: 'left',
  contain: true,
  pageDots: false, 
  draggable: false,
  imagesLoaded: true,
  prevNextButtons: true
});

var nav = document.querySelector('.carousel-nav');
var flickitytwo = new Flickity( nav, {
  // options
  asNavFor: '.property-carousel',
  cellAlign: 'left',
  contain: true,
  pageDots: false,
  prevNextButtons: false
});

and I'm using this in a wordpress loop:

<?php if( have_rows('single_property') ): ?> <?php while ( have_rows('single_property') ) : the_row(); ?> <?php $images = get_sub_field('gallery'); if( $images ): ?>

                    <div class="carousel-nav">
                            <?php foreach( $images as $image ): ?> 
                                <div class="carousel-cell">
                                    <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                                </div>
                            <?php endforeach; ?>   
                        </div>
                <?php endif; ?>
        <?php endwhile; ?>
    <?php else : ?>
        <p>No gallery was found.</p>
    <?php endif; ?>