Question

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>

Answer 1

制作 Owl-Carousel-Version-1 RTL 的步骤如下：

step-1 : 将此代码添加到您的 css 文件中

.owl-carousel .owl-item {
   float: right !important;
}

.owl-carousel .owl-wrapper-outer {
   direction: rtl !important;
}

step-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）：

"-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 已经具有此功能。

Answer 2

此解决方案对我有用

在 owl.carousel.min.css 文件的 .owl-stage-outer 类中添加 direction：ltr; ，如下

.owl-stage-outer{
 position:relative;
 overflow:hidden;
 -webkit-transform:translate3d(0,0,0);
 direction: ltr;
}

Answer 3

将此代码添加到CSS文件中

.owl-carousel .owl-item,
.owl-wrapper {
    float: right;
}

Answer 4

只需添加到您的CSS

.owl-carousel{
 direction: ltr !important;
}

其他解决方案也可以使用，但是当您左右拖动轮播时会使其旋转

Answer 5

在 owl.carousel.min.js 中找到此代码 SELECT UserName AS Name, REPLACE(STUFF(CA.[Role],1,1,''),'"','') AS Roles FROM AspNetUsers AS u CROSS APPLY ( SELECT ', '+r.Name FROM AspNetRoles AS r INNER JOIN AspNetUserRoles AS ur ON r.Id = ur.RoleId WHERE u.id = ur.UserId FOR XML PATH('') )CA([Role]) WHERE CA.[Role] IS NOT NULL 并将其更改为此代码 translate3d("+b+"px,0px,0px)。

Owl Carousel不使用方向RTL

5 个答案: