Changing the direction of slider's\carousel's navigation-arrows?

Question

Given we have a slider and the site is Right-to-left.

The slider's arrows work the other way around (Left points right and vice versa).

What are the plausible places to look for the problem in the devtool?

Answer 1

The following solution is a pure-css one and deals particularly with the Flexslider library. It's an RTLization of a particular code-piece of the main Flexslider's CSS file. The site itself is Drupal-based so the path is: /public_html/yoursitesname/sites/all/libraries/flexslider. If your site is not Drupal-based just track the path of the flexslider library and apply the solution there. Here are the stages:

1. copied this piece (which I'll present in a sec), in a note: /*Syntax*/ for backup for future times.
2. RTLizied the original piece.
3. It should be noted that the last part of the RTLization process was to replace between content:'\f001'; and content:'\f002'. I note this because it's less intuitive than changes like flipping a "left:#px" to a "right:#px" one...
4. Gave to the existing query (see end of 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;} }

Instead of:

@media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} }

Enjoy, Ben.