Question

当浏览器窗口缩小到一定大小并将不同的样式应用于列表时，我试图删除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
});

非常感谢任何帮助！

Answer 1

它会出现（我以前见过这个问题，事实上我要提供的解决方案来自于我与另一个图像滑块有同样的问题），“destroy”命令并没有完全破坏滑块。在这样的情况下，一个“简单”的事情是提前保存滑块的备份克隆，然后在销毁后使用它来替换所有滑块。

示例：

//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。因此，如果你想要一个完全不同的样式，当它更小时，然后简单地将你的UL包装在一个ID开头的div中，然后为该DIV＆gt;写直接样式。 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

窗口调整大小与bxslider销毁休息风格

1 个答案: