敏锐的滑块不适用于 next.js

如何解决敏锐的滑块不适用于 next.js

我正在尝试将下面的屏幕截图中显示的以下代码更改为使用敏锐滑块的滑块形式。

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

但敏锐滑块不起作用，卡片显示如下屏幕截图。

请告诉我我做错了什么以及如何解决。