Question

很难解释发生了什么。基本上，现在当我按下下一个按钮时，它会转到上一张幻灯片。如果我按上一个，它将转到下一张幻灯片。我确实启用了RTL，但这是应该如何表现的吗？我制作了一个小视频，以便更好地理解，HERE

知道发生了什么吗？这是我的代码：

//slider rtl
    $('#owl-slider-rtl').owlCarousel({
            rtl: true,
            loop: false,
            autoplay: true,
            autoplayTimeout: 6000, //Set AutoPlay to 6 seconds
            autoplayHoverPause: true,
            nav: true,
            navText: ["<i class='ti-angle-left'></i>", "<i class='ti-angle-right'></i>"],
            items: 1,
            responsive: {
                0: {
                    items: 1
                }
                , 479: {
                    items: 1
                }
                , 768: {
                    items: 1
                }
                , 980: {
                    items: 1
                }
                , 1199: {
                    items: 1
                }
            }
        }
    );

HTML：

<div class="col-xs-12 col-sm-8 col-md-8 thm-padding">
                            <div class="slider-wrapper">
                                <div id="owl-slider" class="owl-carousel owl-theme">
                                    <!-- Slider item ... Multiple of these -->
                                    <div class="item">
                                        <div class="slider-post post-height-1">
                                            <a href="#" class="news-image"><img src="assets/images/slider-695x460-5.jpg" alt="" class="img-responsive"></a>
                                            <div class="post-text">
                                                <span class="post-category">Technology</span>
                                                <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </a></h2>
                                                <ul class="authar-info">
                                                    <li class="authar"><a href="#">by david hall</a></li>
                                                    <li class="date">May 29,2016</li>
                                                    <li class="view"><a href="#">25 views</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.Slider item five -->
                                </div>
                            </div>
                        </div>

这是RTL的默认行为吗？还是代码/ html中存在错误？

Answer 1

您还必须根据rtl编辑css

.owl-next {
left: 0;
right: initial;
}
.owl-prev {
right: 0;
left: initial;
}

Answer 2

只需交换导航按钮即可：

navText: ["<i class='ti-angle-right'></i>", "<i class='ti-angle-left'></i>"]

并将direction: rtl;应用于owl-nav容器。因此，您可以同时翻转幻灯片和导航。为我工作

猫头鹰轮播导航倒置

2 个答案: