0

I am trying to copy an existing Flickity slideshow from a <div> into another one with the click of a button, using a simple javascript:

<script type="text/javascript">
    function copyDiv() {
        var firstDivContent = document.getElementById('test1');
        var secondDivContent = document.getElementById('test2');
        secondDivContent.innerHTML = firstDivContent.innerHTML;
    }
</script>

This seems to somehow break the slideshow as the controls of the copied slideshow do no longer work after copying. This jsfiddle demonstrates what is happening: https://jsfiddle.net/johschmoll/bpv2ns6t/6/

Can someone point out to me why the copied slideshow no longer works and how I can get it to work?

JoSch
  • 869
  • 1
  • 15
  • 35
  • 1
    You're copying the HTML, but you haven't run the JS. Copy only the original HTML (not the flickity output), and then make another instance of the flickity object in JS. – evolutionxbox Oct 10 '17 at 08:31
  • @evolutionxbox Thanks for pointing this out. But how do I actually do that? Am I not copying just the HTML? Would grateful if you could show me what you mean by posting an answer – JoSch Oct 10 '17 at 09:01
  • 1
    I don't have the time to post an answer. Instead I'd rather help you figure it out. --- Basically, don't initialise with HTML, instead [initialise with JavaScript](https://flickity.metafizzy.co/#initialize-with-vanilla-javascript), and when you copy the HTML, you can run the JS again. – evolutionxbox Oct 10 '17 at 09:06
  • @evolutionxbox Alright, I appreciate it! I'll try and figure it out and post here once I've got something. Thanks – JoSch Oct 10 '17 at 09:10
  • @evolutionxbox Ok, so I am running a second instance of the javascript and the copied slideshow does start to work, but running the javascript again leads to the original slideshow being nested inside the new slideshow: https://jsfiddle.net/johschmoll/bpv2ns6t/14/ – JoSch Oct 10 '17 at 09:28
  • Your JS selector is too broad, it will reinitialise the current flickity slider. – evolutionxbox Oct 10 '17 at 10:49
  • 1
    Try making a copy of the HTML (in JS, don't put it in the DOM) _before_ you init flickity. When the button is clicked, append it to the DOM, and pass the element directly into the init, not a CSS selector. – evolutionxbox Oct 10 '17 at 10:50

0 Answers0