BX Slider不适合RTL阿拉伯语翻译
BX Slider不适合RTL阿拉伯语翻译
提问于 2017-05-11 18:10:56
我正在为一个网页的语言翻译，我已经使用谷歌翻译与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>中文:工作良好：
阿拉伯文: RTL不工作：
回答 1
Stack Overflow用户
发布于 2020-12-15 15:01:00
这在阿拉伯文版上对我有效。
- 将
dir="ltr" style="direction: ltr;"添加到.bxslider的父级(以显示每个滑块的图像和文本)。 - 添加
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43922777
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号