keenslider within component renders only one slide about keen-slider HOT 6 CLOSED

Hey @Memphis335,

I forked your codesandbox, update the version to 4.2.1, and fixed the error that happens on ngAfterViewInit() by wrapping the slider initialization with a setTimeout. It seems to work as you wanted to be. Can you confirm that?

Codesandbox Fork

from keen-slider.

I just realized there is a bug in the initial height calculation. Sometimes, I only see the image and not the text. I've fixed that by adding the following to your component.

ngAfterViewChecked() {
    this.slider.resize();
  }

from keen-slider.

Hi @rcbyr,

Thank you for your assistance so far but the fixes did not help. I dug a little deeper and found the following :

I could not see it due to overflow: hidden, which is expected. The problem seem to be here transform: translate3d(412px, 0px, 0px);.

So it appears that is showing all three just not on the same line.

from keen-slider.

@Memphis335
Ah, now I understand. You didn't import the CSS file. Please, see the installation instructions. You can also copy the content of the CSS file to the place where you want it to be.

from keen-slider.

I imported your stylesheet in scss like this (uncommented obviously)

which did seem to work.

For completeness sake, I copied your styles to my file directly to no avail:
,

I also saw in your options that I can pass the class of my slides but that doesn't seem to be doing anything.

I have renamed my classes to yours in the stylesheet .keen-slider__slide but now nothing shows.

from keen-slider.

It seems to be working now with this.slider.resize() and your slide class on my slides. Thank you!

from keen-slider.