猫头鹰轮播滑块不适用于 rtl答案

【问题标题】：owl carousel slider not working with rtl猫头鹰轮播滑块不适用于 rtl
【发布时间】：2016-02-03 22:10:41
【问题描述】：

猫头鹰轮播滑块有问题。

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

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

这是我的代码：

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

有什么帮助吗？

【问题讨论】：

标签： html owl-carousel

【解决方案1】：

将此代码放入css文件中

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

【讨论】：

完美答案，直截了当。

【解决方案2】：

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

猫头鹰轮播 v2.3.4

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

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

【讨论】：

【解决方案3】：

你应该放

方向：rtl
// 甚至会
text-align: right // 不确定是否需要

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

【讨论】：

感谢您的评论，它有效！谢谢你，很抱歉我迟来的回复！
其实我要反其道而行之，只好加上“direction:ltr;”到容器。

【解决方案4】：

解决方案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; }

【讨论】：

【解决方案5】：

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

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

【讨论】：