我有一个flexslider,它在769px或更高的媒体查询时效果很好,但是,一旦视口达到768px宽,flexslider中的IMG在Chrome检查器中就会显示为0x0。在检查器中没有将IMG设置为0x0的位置
http://70e-solutions.mybigcommerce.com/
这是被调用的完整代码:
<div id="ibSlideShow">
<div class="inner">
<div class="Content Widest" id="LayoutColumn1">
<script type="text/javascript" src="javascript/jquery/plugins/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.slide-show').flexslider({
slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: true
});
});
</script>
<div class="slide-show slide-show-render slide-show-render-full flexslider Panel" data-swap-frequency="1000" id="HomeSlideShow">
<ol class="slides">
<li class="slide clone">
<a href="#">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
<li class="slide">
<a href="">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span>
</div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_1.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
<li class="slide">
<a href="">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #ffffff"></h2>
<p class="slide-text" style="color: #ffffff"></p>
<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
</span>
</div>
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
最佳答案
在active.css?t = 1416605492中
/* 768px */
@media screen and (max-width: 768px) {
/* Hide */
#HomeSlideShow,
#ProductBreadcrumb,
.productlist-page .Left {
display: none;
}
#HomeSlideShow设置为不可见从此部分中删除#HomeSlideShow
关于javascript - Flexslider IMG在768px及以下设置为0x0,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27067605/