BX Slider не работает для RTL ARABIC TRANSLATION

Я работаю над языковым переводом для веб-страницы, я использовал Google Translate с плагином слайдера BX. Когда направление текста слева направо, весь слайд работает нормально, но для арабского языка мне нужно справа налево.

Слайдер не работает. Вот код.

<!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>

Английский: работает нормально: Английский заголовок слайда с LTR

Арабский: RTL не работает: Заголовок слайда на арабском языке с RTL


javascript jquery bxslider jquery-ui-slider jquery-slide-effects
person Mohamed Sahir    schedule 11.05.2017    source источник
comment
вы нашли решение этого?   -  person Hamza Rashid    schedule 09.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Это сработало для меня на арабских страницах.

  1. добавьте dir="ltr" style="direction: ltr;" к родителю .bxslider (чтобы показать изображения и текст каждого ползунка).
  2. добавьте dir="rtl" style="direction: rtl;" (чтобы показать правильное направление текста на арабском языке справа налево).

Минимальный пример

<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>
person Hamza Rashid    schedule 15.12.2020