猫头鹰旋转木马不与方向RTL工作
Owl Carousel is not working with direction RTL
Owl Carousel滑块不能与RTL一起工作。我在配置中加入了rtl: true
。但它没有加载滑动条。滑块空间在那里,导航显示出来了。但是只有滑块内容没有显示。我该如何解决这个问题?
代码如下:
<div class="row" id="brand-slider">
<div class="item">
<a href="#">
<img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
</a>
</div>
<div class="item">
<a href="#">
<img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
</a>
</div>
<div class="item">
<a href="#">
<img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
</a>
</div>
<div class="item">
<a href="#">
<img src="{base_url()}assets/upload/brands/{$v.image}" class="img-responsive img-centered" alt="{$v.name}">
</a>
</div>
</div>
<script>
$("#brand-slider").owlCarousel({
rtl: true,
loop: true,
items: 6,
pagination: false,
autoPlay: true,
responsive: true
});
</script>
这个方法对我很有效
将direction: ltr;添加到。在owl.carousel.min.css文件中添加owl-stage-outer类,如下
.owl-stage-outer{
position:relative;
overflow:hidden;
-webkit-transform:translate3d(0,0,0);
direction: ltr;
}
添加到你的CSS中
.owl-carousel{
direction: ltr !important;
}
- 其他解决方案也可以,但是当你向左或向右拖动时,会使旋转木马跳跃
按照以下步骤制作Owl-Carousel-Version-1 RTL:
步骤1:添加这些代码到你的css文件
.owl-carousel .owl-item {
float: right !important;
}
.owl-carousel .owl-wrapper-outer {
direction: rtl !important;
}
步骤2:打开owl.carousel.js然后搜索transform并替换这些行
"-webkit-transform": "translate3D(" + pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
"transform": "translate3d(" + pixels + "px, 0px,0px)"
到此(我们必须将pixel更改为-pixel):
"-webkit-transform": "translate3D(" + -pixels + "px, 0px, 0px)",
"-moz-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-o-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"-ms-transform": "translate3d(" + -pixels + "px, 0px, 0px)",
"transform": "translate3d(" + -pixels + "px, 0px,0px)"
Owl-Carousel-Version-2已经有这个功能了
将此代码添加到您的Css文件
.owl-carousel .owl-item,
.owl-wrapper {
float: right;
}
在owl.carousel.min.js中找到此代码translate3d("+b+"px,0px,0px)
并将其更改为此代码translate3d("+(-b)+"px,0px,0px)
。
在owl.carousel.js文件中
搜索transform
,您应该找到如下内容
transform: 'translate3d("+b+"px,0px,0px)'
看到这个"+b+"
用"+-b+"
代替它,结果是这样的
transform: "translate3d(" + -b + "px,0px, 0px)"
注意这在ltr
版本中不起作用,所以在我的情况下,我使用动态应用程序制作了2个文件,我调用了没有减去" + b + "
和rtl
的英文版本,我添加了这个减号。
我注意到有一个猫头鹰滑动器的选项
$('.owl-carousel').owlCarousel({
rtl:true,
所以你可以使用它,它会解决这个问题
更新你的owl carousel版本,使用owl carousel 2或更新你的js和css文件。然后使用rtl:true,
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- 滑块不能与Bootstrap-RTL一起工作
- 猫头鹰旋转木马不与方向RTL工作
- 猫头鹰旋转木马不工作与引导RTL 3(阿拉伯语)