xxxxxxxxxx
$('.custom1').owlCarousel({
animateOut: 'backOutLeft',
animateIn: 'backInRight',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
xxxxxxxxxx
$("#owl-demo").owlCarousel({
navigation : false,
rtl:true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
xxxxxxxxxx
//default settings:
autoplay:false
autoplayTimeout:5000
autoplayHoverPause:false
xxxxxxxxxx
import OwlCarousel from 'react-owl-carousel';
import $ from 'jquery';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
class Slider extends Component {
state= {
responsive:{
0: {
items: 1,
},
450: {
items: 2,
},
600: {
items: 3,
},
1000: {
items: 4,
},
},
}
render() {
return (<OwlCarousel className={'owl-theme'}
loop={true}
margin={10}
nav={true}
dots={false}
autoplay={true}
autoplayTimeout={2000}
items={4}
responsive={this.state.responsive} >
<div className={'item'}>
Item 1
</div>
<div className={'item'}>
Item 2
</div>
<div className={'item'}>
Item 3
</div>
<div className={'item'}>
Item 4
</div>
<div className={'item'}>
Item 5
</div>
</OwlCarousel>
Run code snippet
xxxxxxxxxx
<button type="submit" class="single_add_to_cart_button bundle_add_to_cart_button button alt">Add to cart</button>
xxxxxxxxxx
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>