使用bxslider破坏断点样式调整窗口大小

window resize with bxslider destroyed breaks style

本文关键字：样式 调整 窗口大小 断点 bxslider 使用      更新时间：2023-09-26

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

任何帮助都非常感谢!

它会出现(我以前见过这个问题，事实上，我即将给出的解决方案来自于我有同样的问题与另一个图像滑块)，"破坏"命令并没有完全破坏滑块。在这种情况下，一个"简单"的做法是提前保存一个滑块的备份克隆，然后在破坏后用它来替换你的滑块。

的例子:

//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创建div，它环绕你的UL。因此，如果你想要一个完全不同的样式，当它更小的时候，那么只需将你的UL包装在一个div中，并以ID开始，然后为该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

相关文章：