Search code examples
wordpresssliderarabicright-to-left

How to change flexslider arrows format in wordpress


I'm working on a website written in Arabic and I'm using the flexslider plugin to display posts using a slider.

left and right arrows

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;
}

Solution

  • I finally solved the issue by adding this css code

    body[dir="rtl"] .flexslider
    {
        direction: ltr;
    }