изменение размера окна с помощью bxslider разрушает стиль разрывов

Я пытаюсь удалить стиль и javascript элемента bxslider, когда окно браузера сжимается до определенного размера, и применяю другой стиль к списку , но он делает странные вещи.

При увеличении ниже 502 пикселей все выглядит и работает нормально, но при повторном уменьшении слайдер исчезает, как и должен, но новый стиль нарушается. На данный момент я просто перезагружаю страницу, если она становится меньше 502 пикселей, что просто ужасно.

Вот мой код:

РЕДАКТИРОВАТЬ: В соответствии с запросом я добавил соответствующий 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
});

Любая помощь высоко ценится!


javascript jquery css bxslider
person Koozer    schedule 29.04.2013    source источник
comment
Я запустил вам jsFiddle ЗДЕСЬ, если бы вы могли просто добавить свой HTML-код, сохранить его и опубликовать ссылку, мы могли бы понять это намного проще   -  person SpYk3HH    schedule 29.04.2013
comment
Теперь следующая проблема, я не вижу, где у вас есть какие-либо вторичные настройки стиля. насколько я вижу, ползунок разрушается и перестраивается, как сказано, при изменении размера окна. Идея: если вы хотите, чтобы стиль dif без ползунка для ul, когда bxslider уничтожался, поместите ul в именованный div. Если вы посмотрите на свой html после загрузки, вы заметите, что bxslider перемещает ваш ul внутри своих собственных div, поэтому, если бы у вас был какой-то css, например #myDiv > ul, тогда ваш стиль ul применялся бы ТОЛЬКО при уничтожении ползунка, что дает вам ваш собственный стиль для небольших окон   -  person SpYk3HH    schedule 29.04.2013
comment
ооо, нм, при дальнейшем просмотре я вижу, что bxslider НЕ УНИЧТОЖАЕТСЯ. Не совсем. CSS меняется и html, но команды по-прежнему отправляются элементу, имеющему класс bxslider. Это так. поместите идентификатор в свой UL и используйте его в качестве селектора. removeClass класс bxslider, когда вы уничтожаете, а затем читаете при воссоздании   -  person SpYk3HH    schedule 29.04.2013
comment
НМ, похоже, это тоже не помогло. Я предлагаю полностью уничтожить его и заменить оригинальным клоном, подождите, я приведу пример...   -  person SpYk3HH    schedule 29.04.2013

Ответы (1)


arrow_upward
3
arrow_downward

Казалось бы (и я видел эту проблему раньше, на самом деле решение, которое я собираюсь дать, пришло из-за того, что у меня была такая же проблема с другим слайдером изображения), команда «уничтожить» не полностью уничтожает слайдер. В таком случае «просто» было бы заранее сохранить резервную копию ползунка, а затем использовать ее для полной замены ползунка после уничтожения.

Пример:

//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 с идентификатором для начала, а затем напишите прямой стиль для этого 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
person SpYk3HH    schedule 29.04.2013
comment
@Koozer Kewl, я только что обновил свой ответ, добавив немного больше информации, надеюсь, это поможет в достижении вашей конечной цели! Удачи! - person SpYk3HH; 29.04.2013