如何调用 OwlCarousel react 方法答案

【问题标题】：how call OwlCarousel react Method如何调用 OwlCarousel react 方法
【发布时间】：2020-08-05 20:19:24
【问题描述】：

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

【问题讨论】：

如何调用 OwlCarousel 方法？
github.com/laurenchen0631/react-owl-carousel/issues/…看看这个答案

标签： javascript reactjs owl-carousel

【解决方案1】：

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

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

第 2 步 - 将选项传递给 OwlCarousel，如下所示

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

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

【讨论】：

【解决方案2】：

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

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

}

【讨论】：