search

ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 785 forks source link

Is there a way to initialize an empty carousel and then reinit tns after items are inserted via an ajax call? #511

Open adrianocr opened 4 years ago

adrianocr commented 4 years ago

Issue description:
I am using instafeed.js to create an instagram feed carousel. Instafeed, instafetch, and other instagram js libraries, all take a DOM element ID, make the instagram calls, and insert the returned images into the element ID you provided.

So I have an empty <div id="instagramFeed"></div> element on the page. Instafeed makes its calls and then the above turns into 

<div id="instagramFeed">
  <div class="instagram-item"><img src="//instagram.com/image_url.jpg" /></div>
  <div class="instagram-item"><img src="//instagram.com/image_url2.jpg" /></div>
  ...
</div>

I'm calling tns on the element like 

var instagramFeed = tns({
  container: '#instagramFeed',
  items: 3,
  ...
})

But what happens here is that since #instagramFeed is empty until instafeed.js populates it, the browser console says it couldn't find any slides. And then when I try to .destroy() and .rebuild() tns on the element, it says that tns wasn't found on that element or whatever.

So what can I do here? If I place an empty item in the carousel it works but then when I destroy and rebuild tns on the element, the carousel now has an empty slide and the nav behaves weirdly because it's indexed to a wrong number of slides.

Tiny-slider version: Latest Browser name && version: Chrome Beta, Firefox Beta OS name && version: macOS latest, Fedora 31

fajfara commented 4 years ago

I know this is an old issue, but it is still open, so here it goes. This seems like a no brainer, why don't you just wait until instafeed has finished rendering? Instafeed seems to have a callback option 'after', so just run tns inside of that callback function.