Search code examples
slick.jsjquery-steps

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

Sorry for my broken english. I'm using ken wheeler slick with jquery steps. I add a new step with jquery steps like this:

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

after that, I use slick script and starting slick function like this:

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

adding step is succesfully done, but slick don't display normally, display like this: jsfiddle example: https://jsfiddle.net/cw38qpc5/ enter image description here

but I start slick with javascript setTimeout function slick start and display succesfully.

like this:

setTimeout(function(){ $('#slickdemo3').slick({     infinite: false,slidesToShow: 4,slidesToScroll:4}); }, 1000);

It is normal. jsfiddle example: https://jsfiddle.net/raowd335/ enter image description here

thanks for our advice sorry for my english again.

Solution

  • Because there isn't an event for dynamically added or removed steps so far, you have to use the onStepChanged event instead to initialize the inner component (e.g. slick) properly.

    Here you will find the modified jsfiddle you provided.