Flexslider和Right-to-Left语言支持

时间:2012-09-19 14:51:20

标签: jquery flexslider right-to-left

我在包含Flexslider的WordPress上安装了一个模板。我的语言是从右到左(RTL)编写的。当页面为RTL时,Flexslider停止并且不显示任何图像。我该如何解决这个问题?

5 个答案:

答案 0 :(得分:11)

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

  1. 在你的主题上,如果主页上的滑块找到一个名为index.php的文件,找到持有滑块的div和所有这些代码style="direction:ltr;" 这将完美地显示您的文章

  2. 要从rtl修复文字方向,请在主题上找到一个名为flexslider.css的文件,并在包含代码.flexslider .slides > li{的行上(我的第25行)添加: text-align:right;
    direction:rtl;

  3. 这两个步骤为我修好了。祝你好运

答案 1 :(得分:8)

胖子的回答对我不起作用。有效的方法是通过设置.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; }

答案 2 :(得分:2)

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

答案 3 :(得分:1)

要修复方向导航,您自己的样式表中的这些规则应覆盖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;}
}

答案 4 :(得分:0)

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

并且

.flexslider .slides li{
    direction: ltr;
}

它对我有用。