0

我正在尝试在某些博客主题中使用滑块，我已经尝试过 Flexslider 和 Owl Carousel，它们都可以在页面的侧边栏中完美运行，但是当我尝试将它们放在主容器中时，它只是不显示滑块中的图像，我的意思是它完全加载了滑块和所有内容，但似乎图像被隐藏或其他东西，就像一个带有纯白色背景的滑块，只是零图像，它们就像在下面或某事。现在有没有人知道这里到底发生了什么？请帮助我用过这个：

$(document).ready(function() {

$("#owl-demo").owlCarousel({

  autoPlay: 3000, //Set AutoPlay to 3 seconds

  items : 4,
  itemsDesktop : [1199,3],
  itemsDesktopSmall : [979,3]

});

});

和

<div id="owl-demo">

<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>

</div>

和这个

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

在这个容器中：

<div class="widget popular-post">
<h2 class="widget-title"><span class="icon-coffee pull-right"></span>The Title</h2>
...
</div>

这种风格：

.widget {
  margin-bottom: 20px;
  background: #fff;
}

滑块在第一个容器中有效，但在其他容器中无效！事实上，我为另一个容器分配了另一个像这样的滑块：

$(document).ready(function() {

  $("#owlslider").owlCarousel({

  autoPlay: 3000, //Set AutoPlay to 3 seconds

  items : 4,
  itemsDesktop : [1199,3],
  itemsDesktopSmall : [979,3]

  });

});

这里有什么问题？？？

4

0 回答 0