CODEWITHSUNDEEP
javascriptjquerybxsliderjquery-ui-sliderjquery-slide-effects
Mohamed Sahir
Mohamed Sahir

Reputation: 2543

BX Slider is not working for RTL ARABIC TRANSLATION

I am working on language translation for a webpage, I have used Google Translate with BX slider plugin. When text direction is left-to-right, the whole slide is working fine, but for Arabic I require right-to-left.

Slider is not working. Here is the code.

<!DOCTYPE html>
<html>
<head>
<title> Site</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" Booking Site" />
<!-- //Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">

<script src="js/jquery.min.js"></script>

<!-- //js -->
<!-- fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

    <link href="css/jquery.bxslider.css" rel='stylesheet' type='text/css'/>



<style>

<!-- bx slider -->

    @import "lesshat";
body {
  padding: 1em;
}
.bx-wrapper {
  width: 100%;
  border: 10px solid white;
}
.bx-wrapper .bx-viewport {
  height: 189px !important;
}
.bx-wrapper li {
  margin-top: -16px !important;
}

    </style>
</head>
<body>

    <script>
     function googleTranslateElementInit() {
          new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, multilanguagePage: true, autoDisplay: false }, 'google_translate_element');
            $('.goog-te-menu-value').on('DOMSubtreeModified', 'span', function(){
                   language = $(".goog-te-menu-value span").html();

                    if (language == "Arabic"){
                        $('#theContent').css('direction', 'rtl');
                    }
                    else{
                        $('#theContent').css('direction', 'ltr');
                    };
                });
        };    
</script>



    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!--header-->


    <div id="theContent">
    <div id="google_translate_element" ></div>



    <div class="header">
        <div class="container">
            <div class="header-grids">
                <div class="logo">
                    <h1><a href="index.html"><span>Codestrz</span>Traveler</a></h1>
                </div>
                <!--navbar-header-->
                <div class="header-dropdown">
                    <div class="emergency-grid">
                        <ul>
                            <li>contact : </li>
                            <li class="call">+91 9444457001</li>
                        </ul>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="clearfix"> </div>
            </div>


    <!-- reference -->

 <ul class="bxslider" dir="ltr">
  <li><img src="images/offer1.png" /></li> 
  <li><img src="images/offer2.png"/></li>
  <li><img src="images/offer3.png" /></li>
  <li><img src="images/offer4.png" /></li>
  <li><img src="images/offer5.png"/></li>
  <li><img src="images/offer66.png" /></li>
  <li><img src="images/offer7.png"/></li>
  <li><img src="images/offer8.png" /></li>
  </ul>

<script type="text/javascript" src="js/jquery.bxslider.js"></script>


<script>

// added for bx slider   

$('.bxslider').bxSlider({
    minSlides: 1,
    maxSlides: 8,
    slideWidth: 450,
    slideMargin: 0,
    ticker: true,
    speed: 50000
});
</script>


</div>

</body>
</html>

English: working fine: English slide header with LTR

Arabic: RTL not working: Arabic slide header with RTL

Upvotes: 2

Views: 1362

Answers (1)

Hamza Rashid
Hamza Rashid

Reputation: 1385

This worked for me on Arabic pages.

  1. add dir="ltr" style="direction: ltr;" on parent of .bxslider (to show images and text of each slider).
  2. add dir="rtl" style="direction: rtl;" (to show correct direction of Arabic language text from right-to-left).

Minimal Example

<div dir="ltr" style="direction: ltr;">
    <div class="bxslider">
        <div dir="rtl" style="direction: rtl;"><img src="/images/1.jpg" /></div>
        <div dir="rtl" style="direction: rtl;"><img src="/images/2.jpg" /></div>
        <div dir="rtl" style="direction: rtl;"><img src="/images/3.jpg" /></div>
        <div dir="rtl" style="direction: rtl;"><img src="/images/4.jpg" /></div>
    </div>
</div>

Upvotes: 0

Related Questions