Flexslider和Right-to-Left语言支持

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

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;

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

fatma的回答对我不起作用。 通过设置direction: ltr修改.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; } 

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

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

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

 .flexslider .slides li{ direction: ltr; } 

它对我有用。