39

bxSliderを使用する Web サイトを構築しています。

ページが読み込まれると、すべてのスライドが重なり合って表示されます。ページが完全に読み込まれると、最初のスライドが表示されたままになり、残りのスライドは非表示になるため、スライダーが一度に 1 つずつアニメーション化して表示できます。

ページが完全に読み込まれるまでスライドを非表示にするために、さまざまな CSS および bxSlider コールバックを使用してみましたが、うまくいきません。誰もこれを行う方法を知っていますか?

ありがとう！

4

15 に答える 15

54

bxslider には、スライダーが読み込まれるとき (onSliderLoad) のコールバックがあります。コンテナ div で可視性を非表示に設定し、コールバックを使用して可視性を「可視」に設定します。

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });
于 2013-10-21T18:18:36.227 に答える
32

私は同じ問題を抱えていて、この方法で回避しました：

<div class="mySlider" style="display:none">

それから

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });
于 2013-04-29T15:50:25.913 に答える
13

divすべてのコンテンツをラップしているa を置き、そのstyle="display:none"上に a を置きます。次に、bxslider を呼び出した後、それを表示します。

元：

<script type="text/javascript">
$(document).ready(function(){

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>
于 2012-08-10T18:32:26.560 に答える
8

私がやったことは、最初のスライド以外をすべて非表示にする CSS を追加することでした。

追加のマークアップや動作は必要なく、すべての主要なブラウザーで動作します!

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}
于 2013-10-10T19:01:07.033 に答える
4

あなたが持っていると仮定します：

HTML:

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

およびjQuery:

jQuery('.slider').bxSlider({
        ...
});

次に、次のソリューションは、最初のスライド以外のすべてのスライドを非表示にすることでトリックを実行します.

CSS:

ul.slider li:nth-child(n+2) {
    display: none;
}

スライダーが完全にロードされると、アクティブな各スライドは自動的にスタイルを取得しますdisplay: block。

于 2015-06-22T13:06:52.160 に答える
3

私は同じ問題を抱えていましたが、このトリックが私を助けてくれました:

     <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

スライダーの ul 要素に高さとオーバーフローの値を設定します。

よろしくお願いします

于 2012-07-29T22:36:44.720 に答える
2

これと同じ問題がありました。以下のマークアップを使用し、最初は<div class="bxsliderWrapper">CSSで内容を非表示にしていましたがdisplay: none;、スライドの幅が<div class="slide">1px でレンダリングされていることに気付きました。

レスポンシブ機能が、非表示だった最初のコンテナーのサイズを取得し、一致するように各スライドのインライン スタイルを定義していることに関係があると思われます。

<div class="bxsliderWrapper">
  <div class="bxslider">
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
  </div>
</div>

私の解決策は、組み込みのコールバック関数の使用について前述したbradriceと似ています。代わりにreloadSlider()関数を関数に追加しました。show()

<script type="text/javascript">

var $j = jQuery.noConflict();
$j(document).ready(function(){
  var homeSlider = $j('.bxslider').bxSlider();
  $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});

</script>

show() が完了すると、リロードがトリガーされます。

.

編集済み

上記の元の解決策は最初は機能しましたが、ハード リフレッシュ中にキャッシュがクリアされたときに問題が発生しましたshift + REFRESH。関数の対象となる要素.show()が時間内に利用できなかったか、リソースがまだ読み込まれていないと想定しています。（私は推測しています）以下は、この動作の修正です。

<div>withを含む Bx Slider を非表示にする代わりに、 CSS 属性display: none;を使用してスライド イメージを非表示にしました。visibility

.bxslider .slide {
  visibility: hidden;
}

これにより、準備が整うまで画像を画面に表示することなく、スライダーを正しいサイズでレンダリングできます。.css()次に、によってトリガーされるjQuery メソッドを使用して$j(window).load()、ページの読み込み後に可視性を変更しました。これにより、すべてのコードと要素が表示される前に存在することが保証されました。

<script type="text/javascript">

  var $j = jQuery.noConflict();

  $j(document).ready(function(){
    var homeSlider = $j('.bxslider').bxSlider();
  });

  $j(window).load(function(){
    $j(".bxslider .slide").css("visibility", "visible");
  });

</script>

この方法は、同じページの複数のスライダーでも機能しました。.show()このメソッドにより、スライダーのすべてのインスタンスが破損することがわかりました。これがより良い解決策である理由を推測しているだけですが、これをよりよく理解するために誰かが情報を追加できるかもしれません。

于 2014-03-04T05:46:16.987 に答える
2

これをどこで見つけたか思い出せませんが、ページの読み込み時にすべてのスライドが表示されるというこの問題を解決する最もクリーンな方法だと思います。

最初に、bxslider 順序なしリストの周りに div を追加します。

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

次に、次の行を css ファイルに追加して、ページの読み込み時にスライダー全体を非表示にします。

.bxslider-wrap { visibility: hidden; }

最後に、スライダーを「visible: visible via jQuery (js ファイル内)」に設定します。スライダーが読み込まれると、スライダーが再び表示されます。

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

お役に立てれば！

于 2015-02-05T18:17:18.820 に答える
2

私はこれに対する解決策のほとんどを試しましたが、それらは私が目指していたものに対して十分に洗練されていないことがわかりました. スライダーが表示されたばかりの状態で読み込まれると、まだぎくしゃくしたプレゼンテーションが表示されていました。.fade() の使用は近かったのですが、左上から右下にアニメーション化され、奇妙に見えました。onSliderLoad へのフックはうまく機能しますが、可視性を変更してもスライダーが画面に表示されるだけです。もう少しエレガントな入り口を探していたので、フックに、CSS を変更する代わりにクラスを追加しました。

jQuery:

$('.slider').bxSlider({
    auto: false,
    pager: false,
    mode: 'fade',
    onSliderLoad: function(){
        $(".slide-clip").addClass('-visible');
    }
});

サス:

.slide-clip {
    opacity:0;
    max-width: 1305px;  // Used as a clipping mask
    max-height: 360px; // Used as a clipping mask
    overflow:hidden;  // Used as a clipping mask
    margin:0 auto;
    transition(all 275ms);
    &.-visible {
        transition(all 275ms);
        opacity:1;
    }

}

私の場合、スライダーが必要なため、ラッパーを使用してスライダーをマスクしています。興味のある人のために：

<div class="slide-clip">
    <ul class="slider">
        <li style="background-image: url('URL_HERE');"></li>
    </ul>
</div>
于 2015-09-05T15:18:35.353 に答える
1

スライダーにタイトルとテキスト div を追加したので、読み込み時にすべてがページの上部に積み上げられたので、この投稿の助けを借りて、スライド要素を非表示にしながら読み込み要素を表示することができました。

上記の他の人が言ったように、可視性:hidden クラスが外側の div に追加されましたが、その外側に可視性:visible クラスを追加して ajax_loader を表示し、以下のコードを使用して、スライドが読み込まれたときに最初に非表示に設定し、見えるように設定されていました。スライドが読み込まれている間、醜い空白のスペースが表示される代わりに、ローダーが表示されるようになったため、ユーザーにとってより理にかなっています。

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    onSliderLoad: function(){ 
        $(".slideouter").css("visibility", "visible");
        $(".slideloader").css("visibility", "hidden");
    },
   autoControls: true,
  auto: true,
  mode: 'fade'
});

これが役立つことを願っています.slideouterはcssに隠されているdivであり、slideloaderはcssに表示されていますが、スライダーがロードされると両方が交換されます. それが役に立てば幸い。

乾杯、リー

于 2015-03-07T13:38:18.200 に答える
0

このcssを使用しましたが、幅が1200を超える画面で機能しました。これは、スライダーが最大サイズの幅であるためです。タブレットバージョンはまだ修正されていません。この方法でピクセルの代わりに％の量を試すこともできます。

.banner は、bxslider スライダーのメイン div です。

.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}
<div class="banner">
  <div class="bx-wrapper">
     			  
  </div>		    		   
</div>

于 2015-08-19T07:04:53.923 に答える
0

style="display:none" メソッドについては正確にはわかりませんが、jQuery bxSlider のコンテナーで "hide()/fadeOut()" を実行し、その後 bxSlider を初期化すると、マークアップでエラーが発生してレンダリングされます。(おそらく display:none を使用するとエラーを回避できますが、スライダーをフェードさせたい場合は、私の方法が適用されます)

bxSlider を初期化する前に、CSS と JS でコンテナーを「絶対」として配置するだけで、ページの非表示部分に移動し、初期化してから非表示にし、元のポイントに戻し、最後にフェードインします。

$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);

それが役立つことを願っています

于 2013-06-27T07:19:10.730 に答える
-2

それ自体は答えではありませんが、このバグにより、リスト項目のすべての不透明度が 1 に設定されていることに気付いた人はいますか? スライドショーの初期化時に最初の setChildrenFade が呼び出されていないと思います。

更新しました：

以下を追加することで、なんとかソートできました。

/**
    * Start the slideshow
    */
    this.startShow = function (changeText) {
      if (options.mode == 'fade') {
                    setChildrenFade();
                }

スタートショー機能へ。

GoToSlide が呼び出されるまで、setChildrenFade は設計上呼び出されないようです。リスト項目の背景が透明に設定されている場合にのみ実際に問題に気付くため、これはバグである可能性があります...そうでない場合、最初の開始時に z:index が非表示を処理します。

お役に立てれば。

于 2012-08-24T14:18:38.087 に答える