I am trying to enable touchdrag and mousedrag only for mobile devices.
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navText: ['', ''],
items: 4,
responsive: {
0: {
touchDrag: true,
mouseDrag: true
},
768: {
touchDrag: false,
mouseDrag: false
}
},
nav: true
}
Somewhere I read, carousel should be refreshed for changes to happen when resized. But everywhere they used jquery
$('owl-carousel').trigger('refresh.owl.carousel')
But I want to do it without using jquery as I am using owl-carousel-o tag and also owloptions. If there is some other way also please suggest.
CodePudding user response:
The docs already provides a solution for you.
Here I chose "initialized" event to change the options. Despite the name, it seemed to fire more than 1 time. So I put a flag there to make it run only once. Below is the link of working demo with Angular 14.
https://stackblitz.com/edit/angular-ivy-uznbfk?file=src/app/hello.component.ts
CodePudding user response:
I used a hostlistener when screen resizes, and assigned the values in there to change. It is working fine now. @HostListener('window:resize', ['$event'])
checkScreenSize(event?) {
this.isDesktop = window.innerWidth >= 768 ? true : false;
if (this.isDesktop) {
this.customOptions.touchDrag = false;
this.customOptions.mouseDrag = false;
}
else {
this.customOptions.touchDrag = true;
this.customOptions.mouseDrag = true;
}
}
customOptions: OwlOptions = { margin: 10, stagePadding: 10, loop: false, dots: false, navSpeed: 600, navText: ["", ""], nav: true, responsive: { 0: { items: 4 } } }