My current issue involves the navigation in Owl Carousel.
The problem arises when the browser window width exceeds 992px, as the navigation disappears. However, for smaller widths, the navigation works fine.
Where could the problem lie?
Here is the HTML code:
<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>
And here is the JS code:
$('#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
}
}
});
I have also included relevant CSS styles.