javascript Owl Carousel不按RTL方向工作

nnt7mjpx 于 2022-12-10 发布在 Java

关注(0)|答案(8)|浏览(176)

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>

JavaScript

来源：https://stackoverflow.com/questions/38939739/owl-carousel-is-not-working-with-direction-rtl

8条答案

按热度按时间

bbmckpt71#

此解决方案对我很有效
添加方向：ltr;添加到owl.carousel.min.css文件中的**.owl-stage-outer**类，如下所示

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

赞(0）回复(0）举报 2022-12-10

svgewumm2#

只需添加到CSS中

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

其他解决方案也可以，但会使旋转木马跳转，因为你拖动它的权利或左

赞(0）回复(0）举报 2022-12-10

cnh2zyt33#

要使Owl-Carousel-版本1 RTL，请执行以下步骤：
步骤-1：添加这些代码到你的css文件

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

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

步骤-2：打开owl.carousel.js，然后搜索转换并替换此行

"-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)"

（我们必须将像素更改为-像素）：

"-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)"

猫头鹰旋转木马版本2已经具有此功能。

赞(0）回复(0）举报 2022-12-10

fjnneemd4#

将此代码添加到CSS文件

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

赞(0）回复(0）举报 2022-12-10

fcg9iug35#

在owl.carousel.min.js中找到代码translate3d("+b+"px,0px,0px)，并将其更改为代码translate3d("+(-b)+"px,0px,0px)。

赞(0）回复(0）举报 2022-12-10

72qzrwbm6#

在owl.carousel.js文件中
搜索transform应该会找到类似以下内容
transform: 'translate3d("+b+"px,0px,0px)'
看这个"+b+"把它替换成"+-b+"结果是这样的
transform: "translate3d(" + -b + "px,0px, 0px)"
注意这将不工作在ltr版本，所以在我的情况下，我使用动态应用程序，所以做了2个文件，我叫英语版本没有减" + b + "和rtl我添加了这个减。
也许能帮到别人。

赞(0）回复(0）举报 2022-12-10

bnl4lu3b7#

我注意到有一个选项猫头鹰滑块

$('.owl-carousel').owlCarousel({
    rtl:true,

所以你可以用它来解决这个问题。

赞(0）回复(0）举报 2022-12-10

omhiaaxx8#

升级你的猫头鹰旋转木马版本，使用猫头鹰旋转木马2或更新你的js和css文件。

赞(0）回复(0）举报 2022-12-10

我来回答

javascript Owl Carousel不按RTL方向工作

8条答案

相关问题

热门标签

最新问答