Slides on the same view

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]

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

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

[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.