web-dev-qa-db-ja.com

ページがロードされるまでbxSliderでスライドを非表示にする方法は？

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

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

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

ありがとう！

jquerycssbxslider
39
Nick Petrie

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");
      }
  });
52
bradrice

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

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

それから

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });
30
Ehsan Khaveh

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

例：

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

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>
13
Bob

投稿されたソリューションはどれも私にとってはうまくいきませんでした。

Visibility：hiddenを使用すると、ページ上に大きな空白スペースができました。

何らかの理由でdisplay：noneを使用すると、スライドのみが読み込まれ、コントロールのみが読み込まれます。

これは、何らかの合理的な解決策を得ることができる唯一の方法です。

CSSで：

.ctaFtSlider
{
visibility: hidden;
height: 0;
}

関数内：

$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

最後に、HTML：

<div class="ctaFtSlider">
...
</div>
9
Brogan

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

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

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}
7
Jeff Miller

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

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。

4
Eleonora Velikova

私は同じ問題を抱えており、このトリックは私を助けました：

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

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

宜しくお願いします

3
Kire Bananaman

最新のブラウザ（IE10 +）向けの迅速かつ簡単なCSSのみのソリューションは次のとおりです。

.bxslider {
    transform: scale(0);
}

これが機能するのは、最初にスライダーが何にも縮小されず、bxSliderが読み込まれると、インラインスタイルで変換がオーバーライドされるためです。

3
Jonathan Potter

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

jQuery：

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

SASS：

.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>
2
Jereme Yoho

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

まず、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; }

最後に、スライダーを可視性に設定します：スライダーが読み込まれるとjQuery（jsファイル内）で表示され、スライダーが再び表示されます！

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

お役に立てれば！

2
Jordan Smith

これと同じ問題がありました。以下のマークアップを使用し、最初にCSS _<div class="bxsliderWrapper">_を含む_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（）が完了すると、リロードがトリガーされます。

。

[〜＃〜] edited [〜＃〜]

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

_<div>_を含むBx Sliderを_display: none;_で非表示にする代わりに、visibility CSS属性を使用してスライド画像を非表示にしました。

_.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()メソッドにより、スライダーのすべてのインスタンスが破損することがわかりました。なぜこれがより良い解決策であるかを推測しているだけですが、誰かがこれをよりよく理解するために情報を追加できるかもしれません。

2
user2589301

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

上記の他の人が言ったように、visibility：hiddenクラスが外側のdivに追加されましたが、ajax_loaderを表示するためにその外側にvisibility：visibleクラスも追加し、次に以下のコードで、スライドが読み込まれたときに最初に非表示にする可視に設定されました。これで、スライドのロード中にい空白スペースが表示される代わりに、ローダーが表示されるため、ユーザーにとってより意味があります。

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に表示されますが、スライダーがロードされると両方がスワップされます。それが役に立てば幸い。

乾杯、リー

1
Lee Phillips

私はこの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>
0
Bas

Style = "display：none"メソッドについては正確に知りませんが、jQuery bxSliderのコンテナーで「hide（）/ fadeOut（）」を使用し、その後init bxSliderを使用すると、マークアップでエラーが表示されます。 （おそらくdisplay：noneを使用するとエラーが回避されますが、スライダーをフェードしたい場合は、私の方法が適用可能です）

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

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

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

0
Roaring Stones