Owlcarousel - точки не появляются

Я работаю над проектом, и поскольку мои знания в javascript очень ограничены, я решил использовать owlcarousel. все работает нормально, но теперь я столкнулся с проблемой.

Я установил точки в true, но они не отображаются. Моя работа до сих пор такова:

.container {
	width: 90%;
	margin: 0 auto;
}

/*Text over image*/
.item {
	width: 100%;
}

.item img {
   display: block;
   max-width:100%;
}


/*Carousel Nav Buttons*/

.carousel-nav-left{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    margin: auto 0;
    margin-left: -40px;
}

.carousel-nav-right{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
	right: 0%;
    margin: auto 0;
    margin-right: -40px;
}


@media (max-width: 700px) {
	
	.carousel-nav-left{
		margin-left: -30px;
	}

	.carousel-nav-right{
		margin-right: -30px;
	}
	
	.container {
		width: 85%;
	}
}

@media (max-width: 410px) {
	
	.carousel-nav-left{
		margin-left: -25px;
	}

	.carousel-nav-right{
		margin-right: -25px;
	}
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css'; return false;" />
		<link rel="stylesheet" href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'; return false;">
    </head>
	
    <body>
		<div class="container">
			<div class="carousel">
			
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
				<div class="item">
					<img src="http://placehold.it/350x250"  alt="" />
				</div>
				
			</div>
		</div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
		<script>
			(function($){
	
				$('.carousel').owlCarousel({
					items: 4,
					loop:true,
					margin:10,
					nav:true,
					navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
					dots: true,
					paginationSpeed: 300,
					rewindSpeed: 400,
					responsive:{
						0:{
							items:1
						},
						490:{
							items:2
						},
						770:{
							items:3
						},
						1200:{
							items:4
						},
						1500:{
							items:5
						}
					}
				})
				
			})(jQuery);
		</script>
	</body>
</html>

Ответ 1

Убедитесь, что вы включили все необходимые ресурсы:

JQuery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css

Кроме того, убедитесь, что ваш CSS включает в себя соответствующие страницы совы и совы

Вот пример жизненного кода CSS:

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

Как видно из Этот JSFiddle.

Обратите внимание, что если вы удалите dots: true из кода JSFiddle (и запустите его), то будут отображаться "точки" разбивки на страницы. Однако, если вы удалите вышеуказанный CSS, точки не отображаются.

Ответ 2

Я также столкнулся с одной и той же проблемой при использовании слайдера Owl в первый раз на моей веб-странице. Я не мог видеть навигацию по точкам, и я подумал, что это может быть ошибкой, и решил провести какое-то расследование.

Позже я понял, что для включения требуется 2 файла css. Один из них - own-carousel.min.css, а другой - owl.theme.default.min.css. После этого контейнер div должен иметь класс owl-carousel и owl-theme в своем списке классов. Например, например:

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

Надеюсь, это поможет людям, которые сталкиваются с этим вопросом позже.

Ответ 3

Классы owl-carousel и owl-theme в основном контейнере необходимы для появления точек.