Owlcarousel2: Nav and dots are not displayed properly

Created on 21 Apr 2016 · 16Comments · Source: OwlCarousel2/OwlCarousel2

Hi,
I don't understand how the nav and dots work. I have this :
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, items:2, autoplay:true, nav:true, dots:true, responsiveClass: true, responsive: { 1280: { items: 1 }, 1920: { items: 2 } } }) });

I have include all the css and js :
In the header :
<link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css">

In the footer :
<script src="js/jquery-2.2.3.min.js"></script> <script src="js/owl.carousel.js"></script> <script src="js/zepto.min.js"></script>

I can't see the dots and the nav displays like this :
capture

Source

Nicryc

Most helpful comment

i solve it by put a class 'owl-theme' in that carousel

squalvj on 1 Nov 2017

👍6

All 16 comments

(Sorry about the canned reply.)

Please add a link to a page where I can verify this error. You can use a service like plnkr, jsfiddle, jsbin or codepen.

daviddeutsch on 21 Apr 2016

Could it be conflicts with bootstrap ? Because I have a lot of owl-carousel.css errors and bootstrap.min.css errors.

Nicryc on 21 Apr 2016

I think, the problem is that the file owl.theme.default.min.css for version 2.1.1 in the dist folder doesn't have any useful content, only copyright

yaspav on 22 Apr 2016

In the owl.carousel.js file you must goto Navigation.defaults...somewhere around line 2690. There you must set...
dotClass: 'owl-dot',
dotsClass: 'owl-dots',
dots: true,
I answered this question earlier...please refer to.

https://github.com/OwlCarousel2/OwlCarousel2/issues/1354.

when you fix your issue please leave a comment, choose the correct answer, then close the ticket

tonykiefer on 28 Apr 2016

This is a "me too" response. The distribution zips that I'm downloading don't only have the 2 .js files and the owl.carousel.css. None of the other files are included.

JeffroDH on 3 May 2016

Also, tonykiefer, this issue isn't about a preference of markings, it is a problem with the location of the nav text. It's appearing below the carousel off to the left, rather than overlaid over the left and right edges.

JeffroDH on 3 May 2016

Yeah, the minified css theme files are bonked. Need to wait until #1330 is done.

daviddeutsch on 9 May 2016

@JeffroDH...the location of the nav; dots or text...is just a styling issue

tonykiefer on 9 May 2016

@tonykiefer I understand that, and have created a style that works for me, but nonetheless it's broken in the current version.

@daviddeutsch Thank you, can this be flagged as a duplicate to anything?

JeffroDH on 10 May 2016

I'm having a similar issue. I've verified that the Navigation.Defaults are set correctly.

Perhaps some one can point me to a working example?

showcasefloyd on 17 May 2016

I'm having a similar issue.
It turned out, I have had only one "page/owl-item" with loop, then it couldn't create nav or dots on one item only. Just add other items, then it'll be fine. Sorry for bad english, then russian there, use google translate if you need
Не отображались nav и dots, потому что у меня был только один элемент с loop:true. Один элемент - нечего перематывать. Добавьте еще парочку, мне помогло

nebo6 on 3 Jul 2017

i solve it by put a class 'owl-theme' in that carousel

squalvj on 1 Nov 2017

👍6

Yeah, by default value in the documentation was only class"owl-carousel" , u should add "owl-theme" too for styling nav elements, class="owl-carousel owl-theme"!