Моя сова-карусель там не видна (но мы можем видеть, что там firebug)

Question

Как я могу это исправить?

HTML

<section class="ceo-area"> 
     <div class="web-icon"></div> 
     <div class="ceo-details"> 
      <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="ceo-slider"> 
         <div class="slide"> 
          <h1>alexis simpson 
           <span class="ceo-title"> - CEO & Developer</span> 
          </h1> 
          <p>Lorem ipsum dolor sit amet, laudantium, totam rem. Morbi sagittis, sem quis lacinia faucibus, orciipsum gravida tortor, vel <br> interdum mi sapien ut justo consequat magna, id molestie ipsum volutpat quis.</p> 
         </div> 
         <div class="slide"> 
         <h1>alexis simpson 
          <span class="ceo-title"> - CEO & Developer</span> 
         </h1> 
         <p>Lorem ipsum dolor sit amet, laudantium,totam rem. Morbi sagittis, sem quis lacinia faucibus, orci ipsumgravida tortor, vel <br> interdum mi sapien ut justo consequat magna, id molestie ipsum volutpat quis.</p> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="sponsors-area"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-3"> 

        </div> 
       </div> 
      </div> 
     </div> 
</section> 

JQuery (необходим для плагинов JavaScript Bootstrap в)

<script src="js/jquery-3.0.0.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">/script> 

CSS

.ceo-area { 
    position: relative; 
    } 
    .item { 
    background: #3498DB; 
    min-height: 400px; 
    } 
    .ceo-area .web-icon { 
    background: #383838; 
    } 
    .ceo-area .ceo-details { 
    background: #3498DB; 
    min-height: 300px; 
    } 
    .ceo-slider .slide { 
    text-align: center; 
    } 
    .slide h1 { 
    background: #fff none repeat scroll 0 0; 
    color: #3498db; 
    display: inline-block; 
    font-size: 13px; 
    margin-top: 70px; 
    padding: 10px; 
    border-radius: 4px; 
    } 
    .slide h1 span.ceo-title { 
    color: #aaaaaa; 
    font-size: 13px; 
    } 
    .slide p { 
    color: #fff; 
    font-size: 20px; 
    line-height: 34px; 
    position: relative; 
    } 
    .slide p::before { 
    color: #fff; 
    content: "\f10d"; 
    font-family: "FontAwesome"; 
    font-size: 25px; 
    left: -10px; 
    position: absolute; 
    top: -5px; 
    } 
.slide p::after { 
    color: #fff; 
    content: "\f10e"; 
    font-family: "FontAwesome"; 
    font-size: 25px; 
    position: absolute; 
    right: 163px; 
    top: 27px; 
} 

JQuery

(function($){ 
    jQuery(document).ready(function(){ 
     //Pie-chart 
     $('.chart').easyPieChart({ 
     easing: 'easeOutCirc', 
     barColor: '#1abc9c', 
     trackColor: '#f9f9f9', 
     scaleColor:false, 
     scaleLength: 5, 
     percent: 75, 
     lineCap: 'round', 
     lineWidth: 15, //12 
     size: 150, //110 
     animate: {duration: 2000, enabled: true}, 
     onStep: function (from, to, percent) { 
      $(this.el).find('.percent').text(Math.round(percent)); 
     } 
    }); 

    //owl-carousel 
    $(".ceo-slider").owlCarousel({ 
     items : 1, 
     loop: true, 
     nav: true, 
     dots: false, 
     navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']  
    }); 

Answer 1

Я думаю, что вам нужно на самом деле добавить класс owl-carousel к DIV тоже. (Вы пробовали добавлять класс owl-theme тоже загрузить тему по умолчанию?)

класса «Сова-карусель» является обязательным для применения надлежащих стилей, которые приходят из owl.carousel.css файла.

http://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html