CODEWITHSUNDEEP
jqueryflexsliderright-to-left
Mate.8
Mate.8

Reputation: 81

Flexslider and Right-To-Left language support

I installed a template on WordPress that contains Flexslider. My language is written Right-To-Left (RTL). When the page is RTL, the Flexslider stops and no images appear. How can I resolve this issue?

Upvotes: 8

Views: 6298

Answers (5)

Dhiraj Patil
Dhiraj Patil

Reputation: 1

I used reverse:true, in flexslider() function and the slider worked in opposite direction than the default.

And 

.flexslider .slides li{
    direction: ltr;
}

It worked for me.

Upvotes: 0

Layal - ليال
Layal - ليال

Reputation: 928

You need to change both JS and CSS for it to work. Luckily it didn't require much work. I forked the project and added the support at https://github.com/layalk/FlexSlider/tree/rtl. Give it a try.

Upvotes: 2

shadysamir
shadysamir

Reputation: 712

To fix directional navigation, these rules in your own stylesheet should override flexslider rules:

/* Flexslider RTL */
.flex-direction-nav .flex-next {background-position: 0 0; left: -36px; right: auto;}
.flex-direction-nav .flex-prev {background-position: 100% 0; right: -36px; left: auto;}
.flexslider:hover .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-prev {right: 5px; left: auto;}
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; right: 0; left: auto;}
  .flex-direction-nav .flex-next {opacity: 1; left: 0; right: auto;}
}

Upvotes: 1

mark lape
mark lape

Reputation: 206

fatma's answer doesn't work for me. What works is modifying the .flex-viewport by setting direction: ltr:

.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s  ease; transition: all 1s ease; direction: ltr; }

Upvotes: 8

fatma
fatma

Reputation: 111

flex slider doesn't support rtl languages. The only way to fix it is to make the div holding the slider direction: ltr

  1. On your theme, if the slider on the home page find a file called index.php find the div that's holding the slider and all this code style="direction:ltr;" this will display your articles on the slier perfectly

  2. To fix text direction from rtl find a file called flexslider.css on your theme and on the line holding the code .flexslider .slides > li{ (line #25 for me) add this:
    text-align:right;
    direction:rtl;

These tow steps fixed it for me. Good luck

Upvotes: 11

Related Questions