更改滑块's\carousel 的导航箭头的方向?
Changing the direction of slider's\carousel's navigation-arrows?
假设我们有一个滑块,并且网站是从右到左的。
滑块的箭头方向相反(左指向右,反之亦然)。
在 devtool 中寻找问题的合理位置是什么?
以下解决方案是纯粹的 css 解决方案,主要针对 Flexslider 库。它是主要 Flexslider 的 CSS 文件的特定代码片段的 RTL 化。该站点本身是基于 Drupal 的,因此路径是:/public_html/yoursitesname/sites/all/libraries/flexslider
。如果您的站点不是基于 Drupal 的,只需跟踪 flexslider 库的路径并在那里应用解决方案。以下是阶段:
- 复制了这篇文章(我将在一秒钟内展示),在注释中:
/*Syntax*/
以备将来使用。
- RTLizied 原作。
- 需要注意的是,RTLization过程的最后一部分是在
content:'\f001'
之间进行替换;和 content:'\f002'
。我注意到这一点是因为它不如将 "left:#px"
翻转为 "right:#px"
之类的更改直观...
- 给现有查询(见 flexslider.css 结尾):
@media screen and (max-width: 860px)
{
.flex-direction-nav .flex-prev { opacity: 1; left: auto;}
.flex-direction-nav .flex-next { opacity: 1; right: auto;}
}
而不是:
@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev
{ opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity:
1; right: 10px;} }
享受吧,本。
假设我们有一个滑块,并且网站是从右到左的。
滑块的箭头方向相反(左指向右,反之亦然)。
在 devtool 中寻找问题的合理位置是什么?
以下解决方案是纯粹的 css 解决方案,主要针对 Flexslider 库。它是主要 Flexslider 的 CSS 文件的特定代码片段的 RTL 化。该站点本身是基于 Drupal 的,因此路径是:/public_html/yoursitesname/sites/all/libraries/flexslider
。如果您的站点不是基于 Drupal 的,只需跟踪 flexslider 库的路径并在那里应用解决方案。以下是阶段:
- 复制了这篇文章(我将在一秒钟内展示),在注释中:
/*Syntax*/
以备将来使用。 - RTLizied 原作。
- 需要注意的是,RTLization过程的最后一部分是在
content:'\f001'
之间进行替换;和content:'\f002'
。我注意到这一点是因为它不如将"left:#px"
翻转为"right:#px"
之类的更改直观... - 给现有查询(见 flexslider.css 结尾):
@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: auto;} .flex-direction-nav .flex-next { opacity: 1; right: auto;} }
而不是:
@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} }
享受吧,本。