如何调用 OwlCarousel 的 react 方法

Question

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

Answer 1

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

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

第 2 步 - 将选项传递给 OwlCarousel，如下所示 <猫头鹰旋转木马{...this.options}>

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

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

Answer 2

为了调用 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>
    )
}

}

如何调用 OwlCarousel 的 react 方法

how call OwlCarousel react Method

javascript

reactjs

owl-carousel