Question

我想使用响应式图片滑块＆＃39; bxslider＆＃39; （bxslider.com）在我的网站上。不幸的是，滑块的图像通常不会出现在页面上，只有控件可见。但是，只要刷新页面，滑块的图像就会重新出现。

我已经看过这里提出的类似问题，但他给出的建议 - 例如＆＃34;只使用jQuery 1.x＆＃34; - 似乎不适合我。

如果有人有另一个建议会很棒！实际的网址是：http://www.lauraniebel.com/casestudy01.htm和http://www.lauraniebel.com/casestudy02.htm这是我的代码：

    <script src="js/modernizr-2.8.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>


    <div class="bxslider3">    
            <img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters">
            <img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters">
        </div>

<div class="bxslider">    
            <img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic">
            <img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup">
        </div>

<div class="bxslider2">    
            <img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters">
            <img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters">
        </div>


<script>
      $( document ).ready(function(){
      $('.bxslider').bxSlider();
    });

      $( document ).ready(function(){
      $('.bxslider2').bxSlider();
    });


     $( document ).ready(function(){
      $('.bxslider3').bxSlider();
    });
 </script>

Answer 1

将图像包裹在容器内，并为该容器指定明确的宽度和高度。

或者在加载图像后设置bxslider加载，可能使用image onload

按照目前的情况，bxslider在图像有时间加载之前进行初始化，为它们计算0宽度和高度，从而使它们没有外观。

jsfiddle

考虑到明确的宽度/高度，我已将图像包裹在<div class="container"></div>中。问题是内联元素（图像）根据内容（没有加载的图像）计算宽度/高度，bxslider使用0宽度/高度来初始化自己。

Answer 2

典型的jQuery问题。 JavaScript就像＃34;你完成的图像还是什么？＆＃34; 发现这个小插件...... 它会在scr

之前检测所有图像是否已正确呈现

Github link

CDN：

<script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>  <script src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>

响应式图像滑块bxslider仅适用于页面重新加载

2 个答案: