我有一个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/

10-12 13:51