24
rated 0 times
[
27]
[
3]
/ answers: 1 / hits: 90361
/ 8 Years ago, sun, april 24, 2016, 12:00:00
I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.
I have set the dots to true but they do not appear. My work so far is the following:
.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=https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css />
<link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css>
</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>Please let me know how I can fix this issue
More From » css
