在owl-carousel中导航不能以更高的分辨率工作

时间:2017-03-13 09:29:38

标签: jquery css owl-carousel-2

我使用Owl Carousel我遇到了导航问题。

如果浏览器窗口的宽度大于992px,则不显示导航但宽度较小的情况则可以。

哪里有问题?

HTML:

<div id="news-list" class="owl-carousel">
<article class="item news">
    <a href="#" title="Mirum est notare quam littera gothica quam nunc puta">
        <div class="photo">
            <img src="images/news/news_1.jpg" alt="">
        </div>
        <h4>Mirum est notare quam littera gothica quam nunc puta</h4>
    </a>
</article>
<article class="item news">
    <a href="#" title="Mirum est notare quam littera gothica quam nunc puta aółżnteposuerit litterarum formas">
        <div class="photo">
            <img src="images/news/news_2.jpg" alt="">
        </div>
        <h4>Mirum est notare quam littera gothica quam nunc puta aółżnteposuerit litterarum formas</h4>
    </a>
</article>
<article class="item news">
    <a href="#" title="Mółśiejsce - nagroda główna">
        <div class="photo">
            <img src="images/news/news_3.jpg" alt="">
        </div>
        <h4>Mółśiejsce - nagroda główna</h4>
    </a>
</article>

JS:

$('#news-list').owlCarousel({
    loop: true,
    dots: false,
    margin: 40,
    navText: [
        '<img src="images/arrow_left.png" alt="Cofnij">',
        '<img src="images/arrow_right.png" alt="Dalej">'
    ],
    responsive: {
        0: {
            items: 1,
            nav: false
        },
        480: {
            items: 2,
            nav: true
        },
        992: {
            items: 3
        }
    }
});

我也在css中添加了样式。

1 个答案:

答案 0 :(得分:0)

尝试一下:

   $('#news-list').owlCarousel({
        loop: true,
        dots: false,
        margin: 40,
        navText: [
            '<img src="images/arrow_left.png" alt="Cofnij">',
            '<img src="images/arrow_right.png" alt="Dalej">'
        ],
        responsive: {
            0: {
                items: 1,
                nav: false
            },
            480: {
                items: 2,
                nav: true
            },
            992: {
                items: 3,
                nav: true
            }
        }
    });