Slider with images not working when images aren't available immediately about keen-slider HOT 8 CLOSED

Thanks for the quick reply. Do you think the library should ideally detect and handle this automatically?

from keen-slider.

@x4th As a workaround, don't initialize the slider until you get the data.

Or you can manually refresh as @rcbyr Suggested.

import * as React from "react";
import "./styles.css";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";

const target_images = [
  "https://images.unsplash.com/photo-1590004953392-5aba2e72269a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590004845575-cc18b13d1d0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590004987778-bece5c9adab6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590005176489-db2e714711fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80"
];

const Slider = ({images}: {images:any[]}) => {
  const [ref] = useKeenSlider<HTMLDivElement>();

  return (
    <div ref={ref} className="keen-slider">
    {images.map((src, idx) => (
      <div key={idx} className="keen-slider__slide">
        <img src={src} />
      </div>
    ))}
  </div>
  )
}

export default function App() {
  const [images, setImages] = React.useState();
  React.useEffect(() => {
    setTimeout(() => setImages(target_images), 1000);
  },[]);

  return (
    <React.Fragment>
      {Array.isArray(images) && (
        <Slider images={images} />
      )}
    </React.Fragment>
  );
}

from keen-slider.

Hey @x4th

you only need to change the size of the slider manually after loading the images is complete.

See here: https://codesandbox.io/s/keen-slider-default-react-ts-k7wir?file=/src/App.tsx:975-1008

from keen-slider.

Yes, I plan to implement a mutation observer.

from keen-slider.

That's great to hear.

I've run into another issue which I'd like to ask you about and maybe it'll help someone out in the future as well. I'm trying to make the zoom out slider example work for me when again, I'm fetching image urls from the server and then the slides length isn't available immediatelly. Is there a way to make this work?

from keen-slider.

Currently, you can only change the slides with a refresh. See here: https://codesandbox.io/s/keen-slider-zoomout-react-69dsk?file=/src/App.js

from keen-slider.

You should follow the suggestion of @yogeshkotadiya.

from keen-slider.

@x4th As a workaround, don't initialize the slider until you get the data.

Or you can manually refresh as @rcbyr Suggested.

import * as React from "react";
import "./styles.css";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";

const target_images = [
  "https://images.unsplash.com/photo-1590004953392-5aba2e72269a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590004845575-cc18b13d1d0a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590004987778-bece5c9adab6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80",
  "https://images.unsplash.com/photo-1590005176489-db2e714711fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=500&w=800&q=80"
];

const Slider = ({images}: {images:any[]}) => {
  const [ref] = useKeenSlider<HTMLDivElement>();

  return (
    <div ref={ref} className="keen-slider">
    {images.map((src, idx) => (
      <div key={idx} className="keen-slider__slide">
        <img src={src} />
      </div>
    ))}
  </div>
  )
}

export default function App() {
  const [images, setImages] = React.useState();
  React.useEffect(() => {
    setTimeout(() => setImages(target_images), 1000);
  },[]);

  return (
    <React.Fragment>
      {Array.isArray(images) && (
        <Slider images={images} />
      )}
    </React.Fragment>
  );
}

This seems to be a good solution and it worked for me.

from keen-slider.