TA貢獻1854條經驗 獲得超8個贊
要調用 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>
)
}
}
TA貢獻1840條經驗 獲得超5個贊
第 1 步 - 在您的構造函數中創建將在第 2 步中傳遞給 OwnCaroussel 的選項對象
構造函數（）{ 超級（）; this.options = { onInitialized: function(){ this.carousel = this; } };
第 2 步 - 將選項傳遞給 OwlCarousel，如下所示 <OwlCarousel {...this.options}>
第 3 步 - 現在您可以調用輪播的任何方法 - 例如 -
this.carousel.next() 或 this.carousel.prev() 等
舉報