Why isn't the owl carousel showing up?

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();
});

Maybe a link would be better, as we can’t tell from your code if the paths are right etc.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.