slick.js - ken wheeler's slick carousel down start normally with jquery steps -

sorry broken english. i'm using ken wheeler slick jquery steps. add new step jquery steps this:

$("#wizard").steps("add", { title: data.title, content: '<div id="slickdemo3"">'+data.content+'</div>' }); 

after that, use slick script , starting slick function this:

$('#slickdemo3').slick({     infinite: false,slidestoshow: 4,slidestoscroll:4});  

adding step succesfully done, slick don't display normally, display this: jsfiddle example: https://jsfiddle.net/cw38qpc5/

but start slick javascript settimeout function slick start , display succesfully.

like this:

settimeout(function(){ $('#slickdemo3').slick({     infinite: false,slidestoshow: 4,slidestoscroll:4}); }, 1000); 

it normal. jsfiddle example: https://jsfiddle.net/raowd335/

thanks our advice sorry english again.

because there isn't event dynamically added or removed steps far, have use onstepchanged event instead initialize inner component (e.g. slick) properly.

here find modified jsfiddle provided.