How to dynamically add several carousels

I am adding carousels dynamically to a webpage and have serious troubles initializing them.

I tried: 1) dynamically adding carousel html-code with custom classes ("carousel1", "carousel2", ...) 2) adding the JS-init function for custom class to the (jquery append()) => carousel is layouted, but cannot be moved/swiped

I also tried 1) dynamically adding carousel html-code with custom classes ("carousel1", "carousel2", ...) 2) eval() the JS-init function for custom class => carousel is layouted, but cannot be moved/swiped

Is there a way to add carousels to a page dynamically and initialize them?

Example (that is non working):

dynamically add these html code blocks

<div class="slider carousel1">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>

<div class="slider carousel2">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>

.. and dynamically add these JS scripts to the <head></head>
.. or try eval() then after adding the HTML. 
=> no success

<script>
    $('.carousel1').slick({
        setting - name: setting - value
    });
</script>

<script>
    $('.carousel2').slick({
        setting - name: setting - value
    });
</script>

kenwheeler / slick

How to dynamically add several carousels #3285