Question

我觉得这已经发生过几次了。在codepen中，一切都运行良好和花花公子，但转移到我的HTML页面时，根本没有任何显示。

我错过了什么吗？这是工作的代码：http://codepen.io/Goatsy/pen/xgGnq

这是我添加到HTML页面（远程工作）的代码：

目：

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

身体：

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
<b>Monday - Friday</b><br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

            <div class="restitem">
<img src="http://i410.photobucket.com/albums/pp186/Skealz1/Panda-Express-logo1.jpg"/><br/>
Monday - Friday<br/>
8:00am - 6:00pm<br/>
  <div class="restbartext">62%</div>
  <div class="restbar"></div>
  <div class="restbaroverlay"></div>
  <div class="restbartext">Restaurant Capacity</div>
</div>

          </div>
        </div>

CSS：

.restitem {
  text-align: center;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.restbartext {
  font-size: 12px;
  margin-top: 4px;
}

.restbar {
  display: block;
  background-color: #f5f1e6;
  width: 150px;
  height: 6px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

.restbaroverlay {
  display: block;
  background-color: #6e6f1f;
  width: 62%;
  height: 6px;
  margin-left: 0px;
  margin-top: -6px;
}


.owl-prev {
  display: block;
  position: absolute;
  top: 50%;
  left: -60px;
  min-width: 40px;
  min-height: 40px;
  width: auto;
  height: auto;
  margin-top: -20px;
  font-size: 48pt;
  font-weight: 100;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  color: #000;
}


.owl-next {
  display: block;
  position: absolute;
  top: 50%;
  right: -60px;
  min-width: 40px;
  min-height: 40px;
  width: auto;
  height: auto;
  margin-top: -20px;
  font-size: 48pt;
  font-weight: 100;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  color: #000;
}




/* Begin Styles of Individual Elements */

body {
    background: #fff;
    color: #222;
    padding: 0;
    margin: 0;
    font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default;
}

.home-demo .item {
    background: #ff3f4d;
}

.home-demo h2 {
    color: #FFF;
    text-align: center;
    padding: 5rem 0;
    margin: 0;
    font-style: italic;
    font-weight: 300;
}

.home-demo .owl-dot.active span {
    background: #ff3f4d;
}

#features .feature {
    margin: 2rem 0 6rem;
}

#features h2 {
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1rem;
}

#features img {
    display: block;
    margin: 0 auto;
}

JS：

var owl = $('.owl-carousel');
      owl.owlCarousel({
        margin: 10,
        loop: true,
        responsive: {
          1000: {
            items: 5,
            nav: true, 
            dots: false 
          },
          900: {
            items: 4,
            nav: true, 
            dots: false 
          },
          600: {
            items: 3,
            nav: true, 
            dots: false 
          },
          300: {
            items: 2,
            nav: true, 
            dots: false 
          }
        }
      })

非常感谢你的帮助 - 非常感谢！

为什么这适用于Codepen，而不适用于HTML页面？

0 个答案: