Slider not rendering when loading data through an API about keen-slider HOT 9 CLOSED

@sanath1188
Thank you. I think there's an error with the initial value. I believe if you set it to 0, it will work as expected. I will fix this in the next days.

from keen-slider.

Hey @rcbyr, I'm still facing the OP's same issue. From reading the comments I think the issue is supposed to be fixed, but I still can't seem to get it working while using *ngFor. I'm using Angular 10. If you could you please share a stackblitz or codesandbox of this, it'd be great! Thanks.

from keen-slider.

Hi @rcbyr , i'm having the same issue as @divinsmathew. When using ngFor in angular, the slides aren't showing, they are just blank. The data is fetched through an api, i'd like to know if there is a sample for this use case. Thanks so much for this useful project.

from keen-slider.

Hey @sanath1188

thank you. Currently, the slider does not observe any mutation on its own. So you need to tell the slider that there have been some changes. You could do this by calling the resize() function from the slider instance after the view has been updated.

Code-Example:

...
  doResize: boolean = false

  ngOnChanges(): void{
    this.doResize = true
  }

  ngAfterViewChecked(): void{
    if(this._slider && this.doResize) this._slider.resize()
    this.doResize = false
  }
...

from keen-slider.

Interesting. Still doesn't seem to work. Here's my code snippet:

HTML:
<div class="keen-slider" #sliderRef>
<div *ngFor="let number of numbers">
<!--Assume there's HTML enough to show numbers -->
</div>
</div>

TS:

ngAfterViewInit() {
   this.slider = new KeenSlider(this.sliderRef.nativeElement, {
      spacing: 40,
      slidesPerView: 1,
      initial: 4,
     centered: true,
      loop: false,
      mode: "snap",
      breakpoints: {
        "(min-width: 768px)": {
          slidesPerView: 2,
          mode: "snap"
        },
        "(min-width: 1200px)": {
          slidesPerView: 7,
          mode: "snap"
        }
     }
    });
  }

  ngAfterViewChecked(): void{
    if(this.slider && this.dataLoaded) {
      console.log("trying to resize")
      this.slider.resize()
      this.dataLoaded = false;
    } 
  }

The variable dataLoaded is set to true after an API loads the data. The function to call the API happens on ngOnInit()

from keen-slider.

@sanath1188 I just released a new version with a fix for that. Be aware of some style changes.

from keen-slider.

Still seeing the same problem with version 5.2.1, in this case on a React codebase.

  const [sliderRef, slider] = useKeenSlider({
    loop: true,
    slideChanged(s) {
      setCurrentSlide(s.details().relativeSlide);
    },
  });

  useEffect(() => {
    if (slider) {
      slider.resize();
    }
  }, [images]);

When adding items to the slider (images array) the gallery seems to react correctly, but each time I remove items from the array even though the useEffect runs and resize method too, the gallery does not remove the deleted item.

from keen-slider.

Hello @lmartins

I've created a small example with a button to remove slides and it works as expected. https://codesandbox.io/s/keen-slider-default-react-ts-zrzt1?file=/src/App.tsx

Can you create an example that will show your problem?

from keen-slider.

Hi @rcbyr, I was having the same issue and I found a alternative fix. The problem is after fetching data from an api and rendering the data using ngFor, there is a slight offset. So if you call update() immediately after fetching the data, it might not be rendered and the class slider__slide is not applied yet, which results in having the same slides array as before.

To fix this you can use some sort of timeout and call update() then.

   /**
   * Fetch some data from the API.
   */
 public fetchSomeData(): void {
    this.someDataService.getSomeData().subscribe({
      next: (someData: SomeData[]) => {
        this.someData = someData

        if (this.keenSlider) {
          setTimeout(() => {
            this.keenSlider?.update(undefined, 0)

            // Required when using indicator dots below the slides
            this.updateDotHelper()
          }, 1)
        }
      },
    })
  }

   /**
   * Updates the dot helper.
   */
  private updateDotHelper(): void {
    if (this.keenSlider) {
      this.dotHelper = [
        ...Array(this.keenSlider.track.details.slides.length).keys(),
      ]
    }
  }

from keen-slider.