Javascript 滑块不适用于引导RTL
当我加载带有正常引导css fine的滑块时,它工作正常:Javascript 滑块不适用于引导RTL,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,当我加载带有正常引导css fine的滑块时,它工作正常: <link rel="stylesheet" href="css/bootstrap.min.css"> 但是当我用RTLCSS文件加载它时,照片正在改变,但是幻灯片动画由于某种原因无法工作 <link rel="stylesheet" href="css/bootstrap-rtl.min.css"> 我正在使用原始引导repo中的RTL文件 我的滑块: <!-- My Carouse
<link rel="stylesheet" href="css/bootstrap.min.css">
但是当我用RTLCSS文件加载它时,照片正在改变,但是幻灯片动画由于某种原因无法工作
<link rel="stylesheet" href="css/bootstrap-rtl.min.css">
我正在使用原始引导repo中的RTL文件
我的滑块:
<!-- My Carousel -->
<div id="carousel-example" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="gallery/img1.jpg" alt="IMG1">
<div class="carousel-caption" > סלייד ראשון . <button type="button" class="btn btn-primary btn-sm ">לפרטים</button> </div>
</div>
<div class="item ">
<img src="gallery/img2.jpg" alt="IMG2">
<div class="carousel-caption"> סלייד שני . </div>
</div>
<div class="item ">
<img src="gallery/img3.jpg" alt="IMG3">
<div class="carousel-caption"> סלייד שלישי ואחרון . </div>
</div>
</div>
</div><!-- End of My Carousel -->
סלייד ראשון . לפרטים
סלייד שני .
סלייד שלישי ואחרון .
您只需编辑旋转木马容器方向
<style>
#carousel_container, #or_beyond_the_container_if_needed {
direction: ltr;
}
</style>
#旋转集装箱,或超出集装箱(如果需要){
方向:ltr;
}
这将改变转盘方向
<style>
#carousel_container, #or_beyond_the_container_if_needed {
direction: ltr;
}
</style>
注释:此解决方案将适用于任何转盘或滑块,您应该先执行一个条件,仅在需要的语言上加载引导rtl。 然后使用这些更改创建自定义样式,请确保仅在需要时调用此自定义样式,因为这将导致您与ltr不兼容
.carousel-item {
margin-right: initial;
}
.carousel-control-next {
right: initial;
}
您使用的是这两个版本的最新版本吗?@Spokey是的,我同时从同一个git下载了这两个版本。@Unknownman我不确定fiddle是什么。我从哪里得到它?