Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Reverse owl carousel slider slide from right to left

I want to reverse slider for Arabic language so slider behavior reverse.

Prevoius [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] Next

Assume that here 1 to 10 is block that content some heading and description.

so here i want reverse of these sequence 1th is at position of 10th and 10th is at 1th position so what should i do?

Finally i want

Next [10] [9] [8] [7] [6] [5] [4] [3] [2] [1] Prevoius

like image 567
Uttam Panara Avatar asked Dec 05 '14 09:12

Uttam Panara


People also ask

How do I change the direction on my owl carousel?

By adding rtl:true Owl will change direction from Right to left.

How do you turn off auto slide on Owl carousel?

In order to stop owl auto play you can trigger the corresponding event: stop. owl. autoplay: Stops autoplay.

How do you make an owl carousel responsive?

Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }

How to make an owl carousel slider using HTML?

To get the source codes you just need to scroll down. You can use this pre-built carousel slider on your HTML pages, projects, and websites. To create this program (Responsive Owl-carousel Slider). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

How to get the source codes for the carousel slider?

To get the source codes you just need to scroll down. You can use this pre-built carousel slider on your projects and websites. To create this program (OWL Carousel Cards Slider). First, you need to create two Files one HTML File and another one is CSS File.

How do I listen for events in owl carousel?

You can listen for events. var owl = $('.owl-carousel'); owl.owlCarousel(); // Listen to owl events: owl.on('changed.owl.carousel', function(event) { // your code goes here... }) You can also trigger events and handle the Owl carousel.

What is the Order of the carousel?

Furthermore, we will also discuss the order of the carousel. order in the sense slide from left to right or right to left Let's have a look at file structure, it's is not more complicated you can just copy and paste them into your project.


1 Answers

Here's the specification to scroll from right to left:

https://owlcarousel2.github.io/OwlCarousel2/demos/rtl.html

As you can see it's simply using the owl variable rtl giving it a true value like so:

$('.your-carousel').owlCarousel({ rtl:true });

like image 150
marijose rf Avatar answered Oct 12 '22 05:10

marijose rf