Slides on the same view

[Yagasaki7K]

Why my "keen-slider" stay that? Anyone can help me?

When I make any changes to the code, it changes back to its original state one slide at a time, but as soon as I refresh the page or go up to production mode, it reverts back to its original three-slide state - no swiping - in the same place.

{firstNews.mainImage && firstNews.mainImage.asset && (
                <div className="keen-slider__slide">
                    <a href={firstNews?.slug.current}>
                        <img src={firstNews?.mainImage.asset.url} alt={firstNews?.title}/>
                    </a>
                    <div className="slider-description">
                        <div className="slide-tag">
                            <span className="latest">HOT NEWS 🔥</span>
                            {/* <span className="tag">{firstNews?.category.title}</span> */}
                            <span className="date">{formatDate(firstNews?.publishedAt)}</span>
                            <span> - </span>
                            <span className="author">
                                <a href="https://yagasaki.vercel.app/" target="_blank">Anderson Marlon</a>
                            </span>
                        </div>

                        <a href={firstNews?.slug.current}><h1>{firstNews?.title}</h1></a>
                        <p>{firstNews?.description}</p>
                        </div>
                </div>
                )}

setFirstNews(data[0]),
setSecondNews(data[1]),
setThirdNews(data[2])

Data is coming from Sanity.io and the SecondNews and ThirdNews is the same than the FirstNews speaking about the code.

[rcbyr]

Hey @Yagasaki7K

did you try to call slider.update() after setting the news data?

[Yagasaki7K]

No. You have a example to show to me?

[rcbyr]

Yes, see this example. https://keen-slider.io/examples#mutation

The plugin used in this example can easily be copied into your project.

[Yagasaki7K]

I do the same thing, the difference is that I added dynamic information and put it in loop and that alone was reason for every time I add two or three images, it gets stagnant on a single slide.

I don't know if it would be the case to send the code, but follow the example:

        [
            (slider) => {
                let timeout
                let mouseOver = false
                function clearNextTimeout() {
                    clearTimeout(timeout)
                }
                function nextTimeout() {
                    clearTimeout(timeout)
                    if (mouseOver) return
                    timeout = setTimeout(() => {
                        slider.next()
                    }, 50000)
                }
                slider.on("created", () => {
                    slider.container.addEventListener("mouseover", () => {
                        mouseOver = true
                        clearNextTimeout()
                    })
                    slider.container.addEventListener("mouseout", () => {
                        mouseOver = false
                        nextTimeout()
                    })
                    nextTimeout()
                })
                slider.on("dragStarted", clearNextTimeout)
                slider.on("animationEnded", nextTimeout)
                slider.on("updated", nextTimeout)
            },
        ]
    )
 

And in the React and Sanity.io with dynamics info:

<SlideDetails>
            <div ref={refCallback} className="keen-slider">
                {firstNews.mainImage && firstNews.mainImage.asset && (
                <div className="keen-slider__slide">
                    <Link href={firstNews?.slug.current}>
                        <Image src={firstNews?.mainImage.asset.url} alt={firstNews?.title}/>
                    </Link>
                    <div className="slider-description">
                        <div className="slide-tag">
                            <span className="latest">HOT NEWS 🔥</span>
                            {/* <span className="tag">{firstNews?.category.title}</span> */}
                            <span className="date">{formatDate(firstNews?.publishedAt)}</span>
                            <span> - </span>
                            <span className="author">
                                <Link href="https://yagasaki.vercel.app/" target="_blank" rel="noreferrer">Anderson Marlon</Link>
                            </span>
                        </div>

                        <Link href={firstNews?.slug.current}><h1>{firstNews?.title}</h1></Link>
                        <p>{firstNews?.description}</p>
                        </div>
                </div>
                )}
            </div>
        </SlideDetails>

[Yagasaki7K]

Even using different variables to add more slides (several <div className="keen-slider__slide">), it leaves everything on the same slide.

[rcbyr]

Which version do you use?

[Yagasaki7K]

"keen-slider": "^6.7.0"

[rcbyr]

I know I ask this before but please try it again to add the mutation observer plugin. Just copy the following code in the plugin array.

(slider) => {
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      slider.update();
    });
  });
  const config = { childList: true };

  slider.on("created", () => {
    observer.observe(slider.container, config);
  });
  slider.on("destroyed", () => {
    observer.disconnect();
  });
}

[aecorredor]

@rcbyr I think I'm experiencing this same problem. I followed the mutation and even the resize observer examples, and I still get the same behavior:

1. Slider works fine in the initial state with X number of slides.
2. Slider breaks and shows all slides without any sliding behavior after I add/remove subsequent slides dynamically.

If I inspect the HTML, I see that the style that animates the translate is not there after changing the slides.

I'm also on 6.7.0.

[aecorredor]

I noticed that my issue was somehow caused by passing a key (best practice) to my slider elements (I'm returning them from a dynamic map). Not sure what caused that though. Seemed to be an internal thing with keen slider?

[rcbyr]

Hey @aecorredor

could you create a reproducible example in a repo or codesandbox? The key property is actually not a problem for the slider. I also use it in some examples. I could imagine that the key changes when it shouldn't.

[aecorredor]

@rcbyr thanks for the prompt answer. Let me see if I can get something up.

I didn't follow this: I could imagine that the key changes when it shouldn't.. I don't know how that would happen though. Right now I was using the image's URL as the key, which is unique per image, obviously. And my code just has a call to .filter which has some logic for selecting the images it wants to show in the slider. Basically I have slider for T-Shirts, and based on the selected color, I show only images of that colors. So the sliders do completely change when the user selects a different color. Old slides get taken out and the new ones come in.

This use case seemed to be identical to the Mutation Observer example in the website, and it does work as expected when I don't pass the key to the children.