如何调用 OwlCarousel 的 react 方法

Question

嗨，我使用 OwlCarousel React，我需要调用方法，但我不知道调用方法，请帮助我 https://github.com/laurenchen0631/react-owl-carousel

Answer 1

要调用 OwlCarousel 的方法，您应该将 ref 放在 react OwlCarousel 元素上并将其附加到此，然后在此调用方法，例如：

export class Owldemo1 extends Component {

click = ()=>{

    console.log(this.slider);

    this.slider.next(500)

}

render() {

    return (

        <div>

            <button onClick={this.click} className="btn btn-info">

                salam

            </button>

            <OwlCarousel items={5}

                         className="owl-theme"

                         loop

                         nav

                         margin={10}

                         ref={slider => (this.slider = slider)}

            >

                <div><img className="img" src="https://picsum.photos/seed/1/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/2/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/4/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/3/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/5/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/6/200/300"/></div>

                <div><img className="img" src="https://picsum.photos/seed/7/200/300"/></div>

            </OwlCarousel>

        </div>

    )

}

}

Answer 2

第 1 步 - 在您的构造函数中创建将在第 2 步中传递给 OwnCaroussel 的选项对象

构造函数（）{ 超级（）; this.options = { onInitialized: function(){ this.carousel = this; } };

第 2 步 - 将选项传递给 OwlCarousel，如下所示 <OwlCarousel {...this.options}>

第 3 步 - 现在您可以调用轮播的任何方法 - 例如 -

this.carousel.next() 或 this.carousel.prev() 等