【发布时间】：2014-12-06 12:44:33
【问题描述】：
我几乎完成了创建一个简洁的用户个人资料页面，用户可以在其中查看他们的个人资料。我正在使用集成在 Wordpress 中的 Bootstrap 框架。我使用Bootstrap's Tabs 来获取大量信息，但要让用户清楚。 我有两个主要选项卡，称为“AWF I”和“AWF II”，在这些选项卡中我有关于基金的信息，还有一个用于显示图片的 Owl Carousel 如您所见，轮播效果很好，但是当我激活选项卡“AWF II”时，我得到了这个： 如您所见，图片/轮播本身非常小，我不知道如何克服这一点，轮播应该像“AWF I”选项卡中的那样显示。 这里有一个线索可能会让你们知道为什么会发生这种情况：当我右键单击并检查 Google Chrome 中的元素时，轮播会弹出到正确的大小，就像它应该的那样： 但是当我切换回“AWF I”之后，那个轮播显示小图像，所以基本上，用谷歌浏览器检查会使它们切换角色。
这有什么线索吗？如果您需要更多信息，请告诉我！谢谢！
更新 01
这是我用来调用轮播的代码：
$(document).ready(function(){
$("#owl-awf1-properties,#owl-awf2-properties").owlCarousel({
pagination: true,
loop: true,
dots: false,
autoplay: true,
autoplayTimeout:2000,
autoplayHoverPause:true,
margin:10,
responsiveClass:true,
responsive:{
0: {
items:2
},
450:{
items:3
},
767:{
items:4
},
991:{
items:5
},
1199:{
items:5
}
}
});
});
【问题讨论】：
-
您不会在页面加载时无法获得高度的东西中使用 Owl Carousel，它需要实际调整大小才能工作，或者它在页面加载时工作，如果它位于未加载的内容中当页面加载（选项卡窗格或面板组内容）时，它将不起作用。 Owl Carousel 是响应式的，但不是流畅的，它是通过使用 jQuery 而不是通过使用媒体查询来响应的。
-
jsfiddle.net/Epmwx -- 制作一个小提琴，看看是否可以复制它，以便获得帮助。
-
谢谢！至少我们现在知道这是因为页面的加载。是否有一些我们可以使用并绑定到强制轮播工作的选项卡按钮的 jQuery？我更新了 Fiddle 并将图像放入其中，它可以正常工作，如果没有 fiddle 我们无法弄清楚，我会尽力复制它，但这会很困难，因为我使用循环和其他东西。感谢到目前为止！
-
你在延迟加载吗？这可能就是它不起作用的原因。
-
我没有使用lazyload，我在原帖中添加了我用来调用轮播的js
标签： jquery twitter-bootstrap owl-carousel