I am trying to detect when Owl Carousel is ready to be manipulated so that I can add content to it. The script below initiates the carousel but the initialized event never triggers.
<script type="text/javascript">
jQuery(document).ready(function () {
var owl = jQuery("#owl-example");
owl.on('initialized.owl.carousel', function(e) {
alert('hi');
}).owlCarousel({
navigation: true,
goToFirstSpeed: 2000,
singleItem: false,
transitionStyle: "fade",
items:<?=$_productCollection->getPageSize()?>,
lazyLoad: true,
autoWidth:true,
scrollPerPage:true,
mouseDrag:false,
touchDrag: false,
startPosition: "zero",
navigationText: [
"<strong><</strong>", //this equates to "<"
"<strong>></strong>" //this equates to ">"
]
});
;
});
</script>
Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }
To use Owl Carousel, you'll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.
initialize.owl.carousel and initialized.owl.carousel events must be attached before Owl Carousel initialization
Check this link of the documentation https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html
You need to upgrade to the new version.
https://github.com/OwlCarousel2/OwlCarousel2/archive/2.2.1.zip
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With