猫头鹰旋转木马不与方向RTL工作

Owl Carousel is not working with direction RTL

本文关键字：RTL 工作 方向 旋转木马 猫头鹰      更新时间：2023-09-26

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，

相关文章：