2

我正在为网页进行语言翻译，我使用了带有 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 的阿拉伯文幻灯片标题

4

1 回答 1

0

这在阿拉伯语页面上对我有用。

  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>
于 2020-12-15T15:01:00.717 回答