keenslider within component renders only one slide

[Memphis335]

Hey!

I am trying to implement the slider ("keen-slider": "^4.2.1") inside a component. This component then renders within a page component that has a <section></section>. The slide that I am trying to render is material cards with a min-width of 365px;

I want three to show in the center of the page max-width 80% on large screens and two on tablets and only one on mobiles.

Similar to this: codesandbox.

The component renders only 1 card for some reason.

[rcbyr]

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

[rcbyr]

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();
  }

[Memphis335]

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.

[rcbyr]

@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.

[Memphis335]

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.

[Memphis335]

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