Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider is re-rendering but not rendering new images unless nav buttons are clicked #77

Open
AyoCodess opened this issue Apr 11, 2022 · 2 comments

Comments

@AyoCodess
Copy link

AyoCodess commented Apr 11, 2022

I have modal which displays the image slider, i have a button that is called 'next post' which should render a new image slider and other info in the modal.

what happens is the slider gets re-rendered, the bullet points reflect the right number of new images in the new post, but the new images do not render unless i click the slider nav buttons. Can anyone help?

  const nextPost = () => {
    setPostImageArray(posts[postIndex + 1].images);
    setPostCaption(posts[postIndex + 1].caption);
    setPostIndex(postIndex + 1);
  };

Screenshot 2022-04-11 at 16 25 12

@AyoCodess AyoCodess changed the title Slider not rendering new images Slider is re-rendering but not new images unless nav buttons are clicked Apr 11, 2022
@AyoCodess AyoCodess changed the title Slider is re-rendering but not new images unless nav buttons are clicked Slider is re-rendering but not rendering new images unless nav buttons are clicked Apr 11, 2022
@KristofferTolboll2
Copy link

@AyoCodess

I found a way to solve the issue. You need to pass a key property, that changes anytime the images change as well. Here is an example I made. I am using useMemo to map my images here, but you get the idea


export const SwipeCard = ({ user }: { user: FullUser }) => {
  const { photos, id } = user;
  const userImages = React.useMemo(() => {
    
    let images = [];
    images = photos
      ? photos?.map((photo) => ({
          url: photo.src,
          isBanned: photo.bannedAt !== null,
        }))
      : [{ url: "", isBanned: null }];
    return images;
  }, [photos]);


  return (
    <>
      {userImages?.length > 0 ? (
        <SimpleImageSlider
          width={800}
          key={id}
          height={750}
          images={userImages}
          showBullets={true}
          showNavs={true}
        />
...

@AsurNikulTurka
Copy link

I am also facing the same issue with the slider. It displays the previous item's image when navigating to a new item.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants