search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Multiple Flickity on one page (different types) #869

Closed ste6412 closed 5 years ago

ste6412 commented 5 years ago

https://codepen.io/ste6412/pen/qQVwxx

I have multiple flickity sliders on one page. One uses thumbnails for nav and the others are the basic slider. I have the thumnails as nav slider working.

I can't seem to get the other basic sliders working independently. Can you help me to see where I have gone wrong?

desandro commented 5 years ago

You can add data-flickity to the other .carousel elements to initialize Flickity on them. https://codepen.io/desandro/pen/4d05d16db88db3a304e5965e1681c237/

ste6412 commented 5 years ago

@desandro Thank you very much (love the slider btw).

I do have another issue. I have a page with divs that are hidden and accessed via tabs (using javascript) within each div are multiple sliders. When I visit each tab the sliders don't work unless I right click and inspect element (then only the current viewable sliders work) as soon as I switch tab (still technically on the same page) the sliders don't work. I've attached some images to illustrate.

capture capture2 capture3

desandro commented 5 years ago

Trigger resize

If Flickity is initialized when hidden, like within a tab, trigger resize after it is shown so cells are properly measured and positioned.

$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});
ste6412 commented 5 years ago

Thanks for you response :)

There is now a console error...

Uncaught ReferenceError: $carousel is not defined

desandro commented 5 years ago

change $carousel to the selector or jQuery object of your carousel element. I'll leave this up to you.

ste6412 commented 5 years ago

Thanks for the answer. I'm obviously nowhere near as good at javascript as you as I don't really know what you mean by your answer?

I have done this... and it didn't work?

jQuery('.tablink').on( 'click', function() { $carousel.show('.carousel-cell') // resize after un-hiding Flickity .flickity('resize'); });

I know you're very busy but I would really appreciate your help on this matter. Thanks

ste6412 commented 5 years ago

I have also tried this method...

jQuery('.tablink').on( 'click', function() { jQuery('.carousel-cell') // resize after un-hiding Flickity .flickity('resize'); });

.. to no avail

desandro commented 5 years ago

Can you post all your JS that relates to Flickity?

ste6412 commented 5 years ago

Hi,

thank you for your continued help :)

The only JS I have used is...

jQuery('.tablink').on( 'click', function() { jQuery('.carousel-cell') // resize after un-hiding Flickity .flickity('resize'); });

...I guess I'm missing something?

desandro commented 5 years ago

Sorry I will not be able to provide personal support for your issue.

ste6412 commented 5 years ago

Oh ok, not sure why you asked to see my javascript code then lol? Thanks anyway

SabihaZulfiqar commented 4 years ago

@desandro

Trigger resize

If Flickity is initialized when hidden, like within a tab, trigger resize after it is shown so cells are properly measured and positioned.

$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});

I can't thank you enough! This saved my life. Thanks a million.