Flexslider 和从右到左的语言支持答案

【问题标题】：Flexslider and Right-To-Left language supportFlexslider 和从右到左的语言支持
【发布时间】：2012-09-11 21:53:28
【问题描述】：

我在 WordPress 上安装了一个包含 Flexslider 的模板。我的语言是从右到左 (RTL) 编写的。当页面为 RTL 时，Flexslider 停止并且没有图像出现。我该如何解决这个问题？

【问题讨论】：

标签： jquery flexslider right-to-left

【解决方案1】：

flex 滑块不支持 rtl 语言。修复它的唯一方法是让div持有滑块direction: ltr

在您的主题上，如果主页上的滑块找到一个名为 index.php 的文件，则找到包含滑块的 div 和所有这些代码 style="direction:ltr;" 这将在 slier 上完美显示您的文章
要从 rtl 修复文本方向，请在您的主题和包含代码 .flexslider .slides > li{ 的行（我的第 25 行）上找到一个名为 flexslider.css 的文件，添加以下内容：
text-align:right; direction:rtl;

这两个步骤为我解决了问题。祝你好运

【讨论】：

【解决方案2】：

fatma 的回答对我不起作用。有效的是通过设置direction: ltr 来修改.flex-viewport：

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

【讨论】：

瞧！ fatma 的回答对我也不起作用，但这一个可以解决问题。谢谢！

【解决方案3】：

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

【讨论】：

【解决方案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;}
}

【讨论】：

【解决方案5】：

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

还有

.flexslider .slides li{
    direction: ltr;
}

它对我有用。

【讨论】：