I'm working on a website written in Arabic and I'm using the flexslider plugin to display posts using a slider.
I want to change the format of the arrows, because the website uses rtl and right arrows points to next post instead of the previous one.
As I'm using Wordpress, the flex slider plugin automatically places the arrows in french format and I couldn't find the html that the widget shows.
I'm trying to do it with the following CSS:
/* Direction Nav */
.flex-direction-nav .flex-next
{
background-position: 100% 0; right: 10px;
}
.flex-direction-nav .flex-prev
{
right: 45px;
}
.flexslider:hover .flex-next
{
}
.flexslider:hover .flex-prev
{
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover
{
opacity: 0.8;
}
.flex-direction-nav .flex-disabled
{
opacity: .3!important; filter:alpha(opacity=30);
cursor: default;
}
I finally solved the issue by adding this css code
body[dir="rtl"] .flexslider
{
direction: ltr;
}