react-owl-carousel
1. Getting Started
- You need to inject a global window.jQuery first.
e.g. webpack
// ...plugins: // other plugins, $: 'jquery' jQuery: 'jquery' 'window.jQuery': 'jquery' //...
you can use html script tag to inject jquery as well.
2. Set up your component
add owl-carousel config to owlCarousel function. for use more option please read owlcarousel docs Owl Carousel 2.3
import React from 'react';import owlCarousel from 'react-hgs-owl-carousel';// optionalimport 'owl.carousel/dist/assets/owl.theme.default.css';// ....
for use
next,
prev,
to,
destroy,
play,
stop,
changed,
change,
refresh,
replace,
add,
remove
events, just you import from owlCarousel(config);
for other events you can add event to config constant;
for EX:
// id "demo" is optionalconst MainSlider = const config = id: 'demo' options: loop: true margin: 10 nav: true rtl: true responsive: 0: items: 1 600: items: 3 1000: items: 5 console console console console console console ; const Slider prev add next = ; return <div> <Slider> <div ="item"><h4>1</h4></div> <div ="item"><h4>2</h4></div> <div ="item"><h4>3</h4></div> <div ="item"><h4>4</h4></div> <div ="item"><h4>5</h4></div> <div ="item"><h4>6</h4></div> <div ="item"><h4>7</h4></div> <div ="item"><h4>8</h4></div> <div ="item"><h4>9</h4></div> <div ="item"><h4>10</h4></div> <div ="item"><h4>11</h4></div> <div ="item"><h4>12</h4></div> </Slider> <button =>add item</button> <button =>custon prev</button> <button =>custom next</button> </div>