Flexslider和从右到左的语言支持

Question

我在WordPress上安装了一个包含Flexslider的模板。我的语言书写方向是从右到左(RTL)。当页面使用RTL时，Flexslider停止工作，没有图片显示。如何解决这个问题？

- Mate.8

Answer 1

flex滑块不支持从右到左（RTL）的语言。唯一修复方法是将包含滑块的div设置为 direction: ltr。

1. 对于您的主题，如果首页上的滑块找到一个名为index.php的文件，请找到包含滑块的div，并添加这段代码 style="direction:ltr;"，这将完美地显示您的文章。

2. 要解决RTL文本方向问题，请在您的主题上找到名为flexslider.css的文件，在包含以下代码的行上（对我来说是第25行）添加以下内容：
   text-align:right;
direction:rtl;

这两步骤对我起了作用。祝好运！

- fatma

Answer 2

fatma的答案对我没用。有效的方法是修改.flex-viewport，将direction: ltr设置为：

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

- mark lape

---

太好了！Fatma的答案对我也没用，但这个可以解决问题。谢谢！ - tmt

Answer 3

你需要更改JS和CSS才能使其正常工作。幸运的是，这不需要太多的工作量。我复制了该项目并在https://github.com/layalk/FlexSlider/tree/rtl中添加了支持。试试看吧。

- Layal - ليال

Answer 4

为了修复方向导航，您自己样式表中的这些规则应该覆盖flexslider规则：

/* 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;}
}

- shadysamir

Answer 5

我在flexslider()函数中使用了reverse:true，这样滑块就会以与默认方向相反的方向工作。

而且

.flexslider .slides li{
    direction: ltr;
}

它对我有效。

- Dhiraj Patil