6

レスポンシブフレックススライダープラグインに問題があります。実際のスライドショーに多くの画像がない限り、プラグインは正常に機能します。その場合、ロード動作は受け入れられません。

次のflexsliderイメージプリローダースクリプトを機能させることができないので、誰かが私を助けてくれることを望んでいました。

これが私が使用しているコードです：

FLEXSLIDER HTML

<div class="slider">
    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">
        <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); ">

        <li style="float: left; display: block; width: 940px; ">
        <img src="image1.jpg">  
        </li>
        <li style="float: left; display: block; width: 940px; ">
        <img src="image2.jpg">  
        </li>                       
        <li style="float: left; display: block; width: 940px; ">
        <img src="image3.jpg">

        </ul>

    </div>

HTMLヘッドのFLEXSLIDERSCRIPT

<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide",  
    slideshow: false,
    controlsContainer: ".slider"

    start: function(slider) {
    slider.removeClass('loading');}

        });
 });                    

</script>

FLEXSLIDER.CSS

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}

どんな助けでも大歓迎です！

4

5 に答える 5

4

I tried for many time and for me it worked like this:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        start: function(slider) {
            slider.removeClass('loading');
    }  
});
});
</script>

And on flexslider.css

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}

Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like

 <div class="flexslider loading">
于 2013-03-22T06:39:59.277 に答える
4

flexslider のスライダー オブジェクトを使用する代わりに、スライダー要素自体を jQuery オブジェクトにしてみてください。

<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
       var target_flexslider = $('.flexslider');
       target_flexslider.flexslider({
           animation: "slide",  
           slideshow: false,
           controlsContainer: ".slider",

           start: function(slider) {
               target_flexslider.removeClass('loading');
           }

    });

});                    
</script>
于 2012-08-03T17:04:53.837 に答える
0

「開始」ではなく「前」のコールバックを使用して、なんとか機能させることができました。

したがって、JS ビットは次のようになります。

<!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",  
        slideshow: false,
        controlsContainer: ".slider"

        before: function(slider) {
          slider.removeClass('loading');
        }  
      });
    });                    

</script>
于 2013-03-08T09:56:44.413 に答える
0

最初の li を除いて、それぞれの li に 'style="display: none;"' を追加してみてください。それはうまくいくはずです。

于 2013-04-19T13:13:54.163 に答える