0
184
Vistascómo cambiar el orden del elemento dentro de la base del control deslizante en la dirección (rtl, ltr) para el control deslizante del carrusel del búho angular
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; }1 Respuestas
Responde la pregunta0
¿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, }, }, };