Outer elements stripped from html when adding new slick slide in javascript

chuckdawit commented 6 years ago

when adding a slide via javascript, slick ends up removing/stripping out the two outer most div elements from the final rendered html SO post here - https://stackoverflow.com/questions/51491757/outer-elements-stripped-from-html-when-adding-new-slick-slide-in-javascript

I end up having to add the two divs back into the string that I pass into slick like this

$("#yogabandContainer").slick('slickAdd', "<div class=\"col-sm-4 yogabandContainerColumn\"><div class=\"thumbnail yogabandContainerThumbnail\">" + htmlString + "<\/div><\/div>");

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

`[ paste your jsfiddle link here ]`

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

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

Steps to reproduce the problem

...
...

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

What is the expected behaviour?

... no additional html should have to be re added to the string passed to slickAdd or slickAdd should not be removing any html passed into it as the string to use to add a new slide

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

What is observed behaviour?

... characters are removed from the string passed in as a new slide with slickAdd

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

More Details

Which browsers/versions does it happen on? Chrome and IE
Which jQuery/Slick version are you using? 1.9
Did this work before? yes

niccih commented 5 years ago

Commit https://github.com/kenwheeler/slick/commit/be0d17cc858fb30e6a4d6b28cc29860c7170040d#comments is what results in this issue.

When initializing your slick instance, set the option rows: 0 and the individual slides should render as before.

i-am-al-x commented 4 years ago

In the code for Slick.prototype.slickAdd(markup, index, addBefore), after the ".prependTo()" or ".appendTo()" operations, the list of items should have a the original item double-nested within new elements created by slick, i.e. there is supposed to be a new DIV enclosing another new DIV and then my element is nested within that. But when ".slickAdd()" is used, the outer elements are never created. As a result, the outer two layers of my element tree get consumed; they get used in place of the missing DIVs.

kenwheeler / slick