如何在next/js中使用Embla carousel的Autoplay?

8xiog9wr  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(172)

我在next/js中有一个工作的Embla carousel,与这个例子非常相似。为了使它工作,我必须在文件的顶部添加use client。我正在尝试使用this library添加自动播放功能。工作相关代码如下:

'use client'

import useEmblaCarousel from 'embla-carousel-react'

export const EmblaCarousel = (props) => {
    const options = { loop: true };

    const [emblaRef, emblaApi] = useEmblaCarousel(
        options
    );
}

如果我添加自动播放,将其更改为:

'use client'

import useEmblaCarousel from 'embla-carousel-react'

export const EmblaCarousel = (props) => {
    const options = { loop: true };

    const [emblaRef, emblaApi] = useEmblaCarousel(
        options, [Autoplay()]
    );
}

我得到以下错误:

Unhandled Runtime Error

TypeError: node is undefined

Call Stack
add
node_modules/embla-carousel-react/node_modules/embla-carousel/embla-carousel.esm.js (195:0)
init
node_modules/embla-carousel-autoplay/embla-carousel-autoplay.esm.js (43:0)
init/<
node_modules/embla-carousel-react/node_modules/embla-carousel/embla-carousel.esm.js (1269:0)
init
node_modules/embla-carousel-react/node_modules/embla-carousel/embla-carousel.esm.js (1269:0)
activate
node_modules/embla-carousel-react/node_modules/embla-carousel/embla-carousel.esm.js (1326:0)
EmblaCarousel
node_modules/embla-carousel-react/node_modules/embla-carousel/embla-carousel.esm.js (1457:0)
useEmblaCarousel/<
node_modules/embla-carousel-react/embla-carousel-react.esm.js (16:36)

我也尝试使用Autoplay与一些选项,但总是得到相同的结果。你能帮忙吗?

neskvpey

neskvpey1#

EmblaCarousel需要EmblaOptionsType类型的对象
您需要为选项指定正确的类型
1.调整您的导入
import useEmblaCarousel,{ EmblaOptionsType } from“embla-carousel-react”;
1.设置选项以键入“EmblaOptionsType”
const选项:EmblaOptionsType = { loop:};

相关问题