0
429
Viewshow to change the order of the item inside the slider base on direction(rtl, ltr) for owl carousel slider angular
I'm trying to change the direction of the owl-carousel-o angular slider depending on the selected language.
I have set rtl: true in the owl-carousel config when initiating it. When the user changes the language, I want to change the rtl to false, but I have to reload the carousel so it takes the update.
I have tried to reload the carousel using this method:
@ViewChild('carousel', { static: true }) carousel: CarouselComponent;
const anyService = this.carousel as any;
const carouselService = anyService.carouselService as CarouselService;
// Here I change the rtl value to false
carouselService.refresh();
carouselService.update();
But the carousel stays in rtl mode even when I switch the language to ltr mode.
Any ideas on solving the problem?
This is how I want to display the slider:
Arabic(rtl):
English(ltr):
The config.ts file:
const sliderConfig = {
loop: true,
mouseDrag: true,
autoHeight: false,
rtl: true,
nav: true,
dots: false,
responsive: {
300: {
items: 1,
stagePadding: 50,
},
500: {
items: 2,
stagePadding: 50,
},
640: {
items: 2,
stagePadding: 50,
},
700: {
items: 3,
stagePadding: 50,
},
900: {
items: 3,
stagePadding: 50,
},
1200: {
items: 5,
stagePadding: 50,
},
1400: {
items: 5,
stagePadding: 50,
},
1600: {
items: 6,
stagePadding: 50,
},
1920: {
items: 7,
stagePadding: 50,
},
},
};
This is how I change the direction of the website when the user switches the language. The .rtl or .ltr is added to the html body.
.rtl {
direction: rtl !important;
text-align: right !important;
}
.ltr {
direction: ltr !important;
text-align: left !important;
}
1 answers
Answer question0
What if you set the Rtl value to variable first of all (before the initialization carousel). Like so:
@ViewChild('carousel', { static: true }) carousel: CarouselComponent;
const anyService = this.carousel as any;
const carouselService = anyService.carouselService as CarouselService;
// Here I change the rtl value to false
var rtlBoolen = false; //or true if rtl off
carouselService.refresh();
carouselService.update();
and after that init the carousel:
const sliderConfig = {
loop: true,
mouseDrag: true,
autoHeight: false,
rtl: rtlBoolen, // here use the variable defined before
nav: true,
dots: false,
responsive: {
300: {
items: 1,
stagePadding: 50,
},
500: {
items: 2,
stagePadding: 50,
},
640: {
items: 2,
stagePadding: 50,
},
700: {
items: 3,
stagePadding: 50,
},
900: {
items: 3,
stagePadding: 50,
},
1200: {
items: 5,
stagePadding: 50,
},
1400: {
items: 5,
stagePadding: 50,
},
1600: {
items: 6,
stagePadding: 50,
},
1920: {
items: 7,
stagePadding: 50,
},
},
};