-1

How can I fix it?

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 (necessary for Bootstrap's JavaScript plugins)

<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>']    
     });
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
john
  • 1
  • 2
  • Ask a question in the text field, get rid of all the `<`s and try to correct your formatting. – Lehue Nov 07 '16 at 13:37

1 Answers1

0

I think you need to actually add the class owl-carousel to the div too. (have you tried adding the class owl-theme too to load the default theme?)

Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

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

Lee
  • 4,187
  • 6
  • 25
  • 71
  • Okay, you need to give more information really. What are you seeing? do you have any console errors or notices? – Lee Nov 14 '16 at 14:39
  • no console errors there..the clases of owl-carousel is seen but vague and not visible on browser..in owl-carousel.css owl-carousel's display is none,if i turn it block then owl-carousel become visible should i overwrite owl-carousel's css? – john Nov 16 '16 at 12:01