Question

我的猫头鹰旋转木马滑块有问题。

当我的html页面打开标记为：<html>时，滑块工作正常，我可以看到图像。

但是当我的页面打开时：<html dir="rtl">，滑块不起作用，我的意思是我看到箭头和分页但不是图片本身：

这是我的代码：

$("#owl-demo").owlCarousel({
            navigation : false,
            rtl:true,
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true
          });

有什么帮助吗？

Answer 1

将此代码放入css文件

.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }

Answer 2

无需在任何地方手动添加自定义CSS规则（尤其是该方向：ltr）...

Owl Carousel v2.3.4

$('.owl-carousel').owlCarousel({
    rtl:true // add this to the rest of the options
});

添加之后，Owl Carousel会自动在转盘HTML元素后附加一个 owl-rtl 类，然后插件的CSS规则将自动触发 rtl 功能。

Answer 3

在您的 JS 中，只需输入 rtl: true。它对我有用。

$id.owlCarousel({
    items: 1,
    nav: false,
    dots: true,
    autoplay: true,
    rtl: true
});

Answer 4

你应该把

direction: rtl
// maybe even
text-align: right // not sure if necessary

在滑块的父元素上。这应该可以解决问题。

Answer 5

解决方案1：请尝试使用此js代码

$('.owl-carousel').owlCarousel({
    rtl:true,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

解决方案2：请尝试使用此CSS代码

.owl-carousel,
.bx-wrapper { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }

猫头鹰旋转木马滑块不与rtl一起工作

5 个答案: