How to reinitialize flexslider for a dynamic loading

Question

I got a problem with flexslider, I need to download my picture in base64 from a webservice. After the download is complete, I make an .append() to add my slide...

But sometimes, everything is added perfectly but the slider doesn't reload correctly So I get code like this : screen1

instead of code like this : screen2

How can I reinitiate my slider in this case ?

score 32 · Accepted Answer · answered May 02 '13 at 09:00

32

Solution found ! Just add this line of code to remove the old slider ref if exists

$('#flexslider').removeData("flexslider");

answered May 02 '13 at 09:00

TheLazyFox

1,065
3
11
27

Your answer was very useful for me ! – Simon May 25 '13 at 07:49
@AlxAlx I am getting the same problem, in my case slider is initializing in normal way but images are not loading.(here whole slider inner content is coming dynamically). Any idea how to get those images? – Sanjib Karmakar Dec 18 '13 at 09:50
flexslider + knockout.js + this answer = amazing – MaKR Mar 07 '14 at 16:06
Dude, your answer saved my as*. I am very grateful for your answer. Thank You. – Zafrullah Syed Jun 22 '15 at 09:08
You da best. This was exactly what I was looking for – JeffreyPia Aug 03 '21 at 15:22

score 8 · Answer 2 · answered Apr 29 '13 at 15:49

8

When the download is complete, and after you make the append, try using the method again.

$('.flexslider').flexslider();

That should reinitiate it and account for new content.

answered Apr 29 '13 at 15:49

Jonny Sooter

2,417
1
24
40

How to reinitialize flexslider for a dynamic loading

2 Answers2

Linked