Question

我试图在一些博客主题中使用滑块，我已尝试过Flexslider和Owl Carousel，两者都在页面的侧边栏中完美地工作但是当我尝试将它们放在主容器中时它只是没有显示滑块中的图像，我的意思是它完全加载滑块和所有东西，但它似乎隐藏了图像或其他东西，它就像一个带有纯白色背景的滑块，只是ZERO图像，它们就像是在下面或者是...... 现在有谁知道这里到底发生了什么？请帮忙我用过这个：

$(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]

  });

});

这里有什么问题???

滑块图像不会出现在容器中

0 个答案: