6

ブラウザー ウィンドウが特定のサイズに縮小し、別のスタイルをリストに適用するときに、 bxslider要素のスタイリングと JavaScript を削除しようとしていますが、奇妙なことをしています。

502px 未満からスケールアップすると、すべてが正常に表示され、正常に動作しますが、再度スケールダウンすると、スライダーは本来のように消えますが、新しいスタイルは壊れています。現時点では、502px を下回った場合にページをリロードするだけですが、これは恐ろしいことです。

これが私のコードです：

編集: 要求に応じて、関連する HTML、javascript、および CSS を JSFiddle: http://jsfiddle.net/tYRJ2/2/に追加しました。(CSS は完全ではありませんが、問題を示しています。)

var sliderActive = false;
var slider;

function createSlider() {
    slider = jQuery('.bxslider').bxSlider({
        adaptiveHeight: false,
        swipeThreshold: 40,
        controls: true,
        auto: true,
        pause: 6000,
        autoHover: true,
      });
      return true;
}

//create slider if new page is wide
jQuery(document).ready(function(){
    if (window.innerWidth > 502) {
        sliderActive = createSlider();
    }
});

//create/destroy slider based on width
jQuery(window).resize(function () {

    //if wide and no slider, create slider
    if (window.innerWidth > 502 && sliderActive == false) {
        sliderActive = createSlider();
    }

    //else if narrow and active slider, destroy slider
    else if (window.innerWidth <= 502 && sliderActive == true){
        slider.destroySlider();
        sliderActive = false;
        location.reload();  //fudgey
    }
    //else if wide and active slider, or narrow and no slider, do nothing
});

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

4

1 に答える 1

3

それが表示されます（そして、私は以前にこの問題を見たことがあります。実際、私が提供しようとしている解決策は、別の画像スライダーで同じ問題を抱えていることから来ました）、「破棄」コマンドはスライダーを完全に破壊していません. このような場合、「簡単な」方法は、事前にスライダーのバックアップ クローンを保存し、それを使用して、破棄後にスライダーをまとめて置き換えることです。

例：

//create slider if page is wide
jQuery(document).ready(function(){
    sliderClone = jQuery('.bxslider').clone(); // here we create our clone to hold on to original HTML
    if (window.innerWidth > 502) {
...... some time later .................
    sliderActive = false;
    slider.replaceWith(sliderClone.clone()); // here i replace the "tampered" HTML with a clone of the "original" that we cloned off for safe keeping earlier

また、コメントで前に述べたように。BXSlider は、UL をラップする div を作成します。したがって、サイズが小さい場合にまったく異なるスタイルが必要な場合は、ID を使用して UL を div でラップし、その DIV > UL の直接スタイルを記述します。

例：

HTML

<div id="myBXSlider">
    <ul class="bxslider">
        <li>
           ......

CSS

// the following first applies to the "slider" when active, 
// using bx-slider's class structure
.bx-viewport {
    margin: 0;
}

.bx-viewport h2 {
    margin-top: 1em;
}

.bx-viewport li {
    list-style: none;
    padding: 0 1em;
    margin: 1%;
    background-color: #eee;
    -moz-box-shadow: 0 0 10px #bbb;
    -webkit-box-shadow: 0 0 10px #bbb;
    box-shadow: 0 0 10px #bbb;
    border: solid #919396 2px;
}
// now for custom styling for when it's just our div then list
#myBXSlider > ul {
    display: block;
    margin: 0 auto;
}
#myBXSlider > ul li {
    background: #FFA;
    color: #F00;
    padding: .5em 1em;
}
#myBXSlider > ul h2 {
    font-style: italic;
}
// etc... etc ..... and so on
于 2013-04-29T17:23:35.077 に答える