I already added the owl.carousel.css and the javascript.
THe carousel isn’t showing up
<!-- Plugin Css -->
<link href="css/owl.carousel.css" rel="stylesheet" type='text/css'>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<link href="css/style.css" rel="stylesheet">
<section id="app" class="section-padding">
<!-- carousel -->
<div class="wrapper">
<div id="owl-slider" class="owl-carousel">
<div class="item">
<img src="img/movies.jpg">
</div>
<div class="item">
<img src="img/movietheater.jpg">
</div>
<div class="item">
<img src="img/movietheater2.jpg">
</div>
<div class="item">
<img src="img/movietheater3.jpg">
</div>
<div class="item">
<img src="img/movietheater4.jpg">
</div>
</div>
</div>
<!-- end carousel -->
</section>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel.min.js"></script>
.wrapper {
background: #ffffff;
position: relative;
}
#owl-slider .owl-prev {
width: 40px;
height: 40px;
background: url(../img/carousel-arrow-right.png) no-repeat center center;
border: 3px solid #ffffff;
float: left;
margin-left: 10px;
position: relative;
border-radius: 50%;
opacity: 0.5;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .5s ease-in-out;
z-index: 10;
}
#owl-slider .owl-next {
width: 40px;
height: 40px;
background: url(../img/carousel-arrow-right.png) no-repeat center center;
border: 3px solid #ffffff;
float: right;
margin-right: 13px;
position: relative;
border-radius: 50%;
opacity: 0.5;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .5s ease-in-out;
z-index: 10;
}
#owl-slider .owl-prev:hover, #owl-slider .owl-next:hover {
opacity: 0.7;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.owl-slider .owl-buttons {
height: 30px;
left: 0;
right: 0;
top: 0;
bottom: 50px;
margin: auto;
z-index: -999999;
}
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});