Estoy tratando de cambiar la dirección del control deslizante angular owl-carousel-o según el idioma seleccionado.
Configuré rtl: true
en la configuración del carrusel de búhos al iniciarlo. Cuando el usuario cambia el idioma, quiero cambiar el rtl
a false
, pero tengo que volver a cargar el carrusel para que tome la actualización.
He intentado recargar el carrusel usando este método :
@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();
Pero el carrusel permanece en modo rtl
incluso cuando cambio el idioma al modo ltr
.
¿Alguna idea para resolver el problema?
Así es como quiero mostrar el control deslizante:
Árabe (rtl):
Inglés (ltr):
El archivo config.ts
:
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, }, }, };
Así es como cambio la dirección del sitio web cuando el usuario cambia el idioma. El .rtl
o .ltr
se agrega al cuerpo html.
.rtl { direction: rtl !important; text-align: right !important; } .ltr { direction: ltr !important; text-align: left !important; }
¿Qué sucede si establece el valor Rtl en variable en primer lugar (antes del carrusel de inicialización)? Al igual que:
@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();
y después de eso inicia el carrusel:
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, }, }, };