• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

430
Views
có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):

ingrese la descripción de la imagen aquí

Inglés (ltr):

ingrese la descripción de la imagen aquí

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; }
almost 3 years ago · Santiago Trujillo
1 answers
Answer question

0

¿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, }, }, };
almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error