我的猫头鹰旋转木马在那里不可见(但我们可以通过firebug看到它)



如何修复?

<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(必须为Bootstrap的JavaScript插件)

<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>']    
     });

我认为你需要实际添加类owl-carousel到div太。(您是否尝试过添加类owl-theme来加载默认主题?)

类"owl-carousel"是强制性的,以应用适当的样式

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

相关内容

最新更新