keen-slider在next.js上不能正常工作

jljoyd4f 于 2023-02-04 发布在其他

关注(0)|答案(4)|浏览(95)

我试图改变下面的代码，如下图所示的工作方式，以滑块形式使用敏锐的滑块。

<div className="card-con mt-6">
          {!loadingImages &&
            nftDataArr.map((ele, index) => {
              return (
                <div className="lg:w-3/12 md:w-3/12 w-full"
                  key={index}>
                  <div className="card">
                    <div className="card__cover cursor-pointer">                      
                      <Image
                        src = {ele.image}
                        placeholder="/img/cover/cover5.jpg"
                        className="card__image"
                        width="auto"
                        height="300"
                        />
                    </div>
                  </div>
                </div>
              )
            }
          )};
        </div>

所以我修改了下面的代码：

<div ref={sliderRef} className="keen-slider">            
        {!loadingImages &&
          nftDataArr.map((ele, index) => {
            return (
              <div className="keen-slider__slide">
                <div className="w-full"
                  key={index}>
                  <div className="card">
                    <div className="card__cover cursor-pointer">                      
                      <Image
                        src = {ele.image}
                        placeholder="/img/cover/cover5.jpg"
                        className="card__image"
                        width="auto"
                        height="300"
                        />
                    </div>
                  </div>
                </div>
              </div>
            )
          }
        )};
      </div>

但敏锐的滑块不工作，卡显示如下面的截图。

请让我知道我做错了什么，以及如何改正。

next.js

来源：https://stackoverflow.com/questions/67992371/keen-slider-does-not-work-on-next-js-well

4条答案

按热度按时间

4si2a6ki1#

我遇到了同样的问题。我设法修复了它，只是把useKeenSlider（）的选项对象设置为空状态对象。当我通过useEffect（）获得我的项目时，我然后用我需要的属性设置对象。这似乎触发了ref更新，从而更新了幻灯片。

const [options,setOptions] = useState({});
const [sliderRef, slider] = useKeenSlider(options);
const [slides, setSlides] = React.useState([]);

useEffect(()=>{
var data = getDataValues();
setSlides(data);
setOptions({
    slidesPerView: 1,
    mode: "free-snap",
    centered: true,
    loop: false,
    initial: 0,
    slideChanged(s) {
      setCurrentSlide(s.details().relativeSlide);
    },
  });
})

赞(0）回复(0）举报 2023-02-04

kwvwclae2#

我使用keen-slider时遇到的问题是我的API调用会在滑块渲染后加载图像，keen-slider不喜欢这样。我解决这个问题的方法是在父组件中运行我的GQL调用，然后在加载完成后将结果传递给keen-slider所在的滑块子组件。除此之外，在加载时，我只显示一个加载图标。

赞(0）回复(0）举报 2023-02-04

ncgqoxb03#

Keen Slider需要幻灯片来计算初始化时的边界，创建后添加的任何幻灯片都不会被考虑在内，并且必须调用slider.update()。但由于只有on state表示图像是否被渲染，因此可以将滑块作为一个整体包含在条件中：

{!loadingImages && (
   <div ref={sliderRef} className="keen-slider">
      ...
   </div>      
)}

或者像前面提到的那样，当图像准备好时调用slider.update()。为了避免 Flink ，您可以相应地添加visibility: hidden。

赞(0）回复(0）举报 2023-02-04

aamkag614#

您可以通过以下方式更新滑块：

const [ref, internalSlider] = useKeenSlider({...})
useEffect(() => {
   internalSlider?.current?.update();
}, [elements]);

这就是我的解决办法。

赞(0）回复(0）举报 2023-02-04

我来回答

keen-slider在next.js上不能正常工作

4条答案

相关问题

热门标签

最新问答