slick carousel showing last slide but says first slide has slick-active

[richi1717]

Hey guys, I am liking this slick carousel but I seem to be having a weird bug. I thought it was only when I set infinite: false but I realized that the only reason it was showing the first slide was because of the clone being the last slide. Whenever I first go to the carousel it always shows the last slide first but if you inspect it, it shows that slide-index of 0 is set to slick-active which it should be. Why is it showing the last slide first? What's weird is when you click the arrow to go to the right it shows the second slide(of 4 total). I would give a jsfiddle but it's a custom element for work and there is a lot that goes into it. Can anyone help me figure out why?

[richi1717]

Here's the js part of it in case it's something I have written wrong. I am using an svg for the arrows but deleted them for demonstration so you didn't have to see a bunch of stuff that isn't really needed.
aaaie.$('[data-aaaie-widget="carousel"]').each( function() {
aaaie.Widgets.config.carousel.initialSlide = 0;
aaaie.Widgets.config.carousel.infinite = false;
aaaie.Widgets.config.carousel.arrows = true;
aaaie.Widgets.config.carousel.dots = true;

  aaaie.Widgets.carousel.render(this, {
    prevArrow : 'svg here',
    nextArrow : 'svg here'
  });
});

[ahmadalfy]

This is really weird, can you please recreate your slider by forking this jsfiddle?

[richi1717]

Like I said I can't really use a jsfiddle:( It's all custom elements and I would have to bring in a lot of stuff and not so sure I'm aloud to do that lol.

[SamesJeabrook]

Has this been resolved? I'm having I think the exact same problem where the cloned slide appears first, but somewhat off center. When I click to slide it "pops" to the next slide (as in there is no transition) and then works as normal from there.

Its only on the initialization that it seems to show this behavior.

[ahmadalfy]

@MrSlips can you recreate it using jsfiddle? I really don't see the problem. Thanks

[richi1717]

I got it to work by making a separate template for the slick slide. I don't know what was causing the error but it was somehow making it load before trying to load it. Once it was in a separate template then it wouldn't load the slides until I told it to and now it works fine.

[SamesJeabrook]

I've been playing around for a while, my carousel is loading within a boostrap modal and I found that if I apply "SELECTOR[0].slick.setPosition()" on the shown.bs.modal event then it would pop the carousel back into view correctly. Its a solution but maybe not the best as there is a delay of about .25 of a second where the user is presented with bad content before it is popped back into view correctly.

[jeffbernard]

Here's a repro for this issue: http://jsfiddle.net/bzefvnm5/
It happens when there's code which focuses something in the last slide after slick() has been called.

[abedmontaser]

@richi1717 I have exactly the same issue, can you help if you solved it

[yaschk]

same issue

[vlady88]

Same here.