Question

0

305

Vistas

how 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;
}

8 months ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-07T20:40:01.859Z

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,
    },
  },
};