slickAdd on mobile breaks layout of div and doesnt add them

[gcooke-hdk]

short description of the bug / issue, provide more detail below.

I have tested using a simple

$(this.carousel).slick('slickAdd', '<div>Clasasasa</div>');

if the browser width is above the breakpoint in my set up then it adds them as expected. If I drop to mobile the <div>Clasasasa</div> are not added. Same issue if I load the page at mobile settings and then move up to above 767

====================================================================

I am sorry, I tried I cant get your fiddle to work. I am an experienced coder.

====================================================================

Steps to reproduce the problem

1. My carousel

let props = {
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: false,
            arrows: true,
            infinite: false,
            speed: 300,
            adaptiveHeight: true,
            arrowsPlacement: "beforeSlides",
            prevArrow:
                '<button type="button" data-control-prev><span class="sr-text">Previous</span>' +
                this.backArrow +
                "</button>",
            nextArrow:
                '<button type="button" data-control-next><span class="sr-text">Next</span>' +
                this.nextArrow +
                "</button>",
            responsive: [
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        };

        // Init slick carousel.
        let carousel = $(this.carousel).slick(props);

2. I am using this simply for testing

this.filteredData.forEach(item => {
            $(this.carousel).slick('slickAdd', '<div>Clasasasa</div>'); 
        });

  3. All works fine above 767 under it breaks. Pretty sure it is not my code but something in the responsive resizing and how they are added to the carousel. Same issue loading slides at mobile. 

====================================================================

What is the expected behaviour?

That the cards are added correctly to the slider at all sizes. If I have no responsive settings it all works.

...

====================================================================

What is observed behaviour?

Depends on length of div content I am trying to add if I try and add a single div <div>Clasasasa</div> it doesnt add at mobiel at all if I add more complex div content it splits it up and breaks the divs.

if I set the ```
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 3
}
}
]

            
           The same as the initial setting it still breaks on resize. 
           
           if I remove the responsive [] it works at all sizes. Probably obvious, but may help problem solve.  

...  


====================================================================


#### More Details

- Which browsers/versions does it happen on?

I am on google , cheked on safari and same issue. 
- Which jQuery/Slick version are you using?

@accessible360/accessible-slick": "^1.0.1"

- Did this work before?

Not when using the .slick('slickAdd',