我使用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中添加了样式。
答案 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
}
}
});