React Slick Slider href always points to the same link

Question

I have the following slider

 const Slides = () => {
      const data = useStaticQuery(graphql`
      query Slider {
        allPrismicSlider {
          nodes {
            data {
              slider {
                alternative_text
                image {
                  url
                }
                link {
                  slug
                }
              }
            }
          }
        }
      }      
      `)

      const slides = [
        {
          uid: data.allPrismicSlider.nodes[0].data.slider[0].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[0].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[0].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[0].alternative_text,
        },
        {
          uid: data.allPrismicSlider.nodes[0].data.slider[1].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[1].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[1].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[1].alternative_text,
        },
        {
          uid: data.allPrismicSlider.nodes[0].data.slider[2].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[2].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[2].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[2].alternative_text,
        },
        {
          uid: data.allPrismicSlider.nodes[0].data.slider[3].link.slug,
          url: data.allPrismicSlider.nodes[0].data.slider[3].link.slug,
          src: data.allPrismicSlider.nodes[0].data.slider[3].image.url,
          alt: data.allPrismicSlider.nodes[0].data.slider[3].alternative_text,
        }
      ]
      return (
        <Slider {...settings}>
          {slides.map(slide => <Link to={`projects/${slide.url}`}><div key={slide.uid}><img src={slide.src} alt={slide.alt}/></div></Link>)}
        </Slider>
      )
    }

As you can see there are different links for each slide, however whenever the slide changes it seems that the top slide is always on top and the opacity is changed. I have attempted to follow this fix: https://github.com/akiran/react-slick/issues/1400 however it didn't seem to fix the error.

Any advice would be hugely helpful.

Thank you.

Edit: Code sandbox as requested - https://codesandbox.io/s/adoring-margulis-847rn?file=/src/components/gallery.js

try adding `key` prop in `Link` component. – Chandan Dec 28 '20 at 12:48 — Chandan, Dec 28 '20 at 12:48
@Chandan This didn't fix the error – Mac Hooper Dec 28 '20 at 14:29 — Mac Hooper, Dec 28 '20 at 14:29

score 3 · Answer 1 · answered Feb 01 '22 at 11:50

3

Add this to your css:

.slick-slide {
  visibility: hidden;
}
.slick-slide.slick-active {
  visibility: visible;
}

This worked for me.

answered Feb 01 '22 at 11:50

Ilir

488
5
20

As simple as this answer – Gabriel Arghire Mar 09 '22 at 16:03

score 0 · Answer 2 · answered Dec 28 '20 at 13:03

0

The key value should be used in the iterable wrapper, not in the child since it's used by React to detect which element has changed.

    <Slider {...settings}>
      {slides.map(slide => <Link key={slide.uid} to={`projects/${slide.url}`}><div><img src={slide.src} alt={slide.alt}/></div></Link>)}
    </Slider>

From the docs:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

answered Dec 28 '20 at 13:03

Ferran Buireu

28,630
6
39
67

Can you provide a CodeSandbox? – Ferran Buireu Dec 28 '20 at 14:32
I have added a CodeSandbox – Mac Hooper Dec 29 '20 at 10:06
The sandbox doesn't seem to compile due to lack of the slider packages (I have tried installing the package) – Mac Hooper Dec 29 '20 at 10:08
I see, come back when it's fixed and try to add edit permissions please :) – Ferran Buireu Dec 29 '20 at 10:12

React Slick Slider href always points to the same link

2 Answers2