बीएक्सस्लाइडर के साथ विंडो का आकार बदल गया ब्रेक स्टाइल

Question

मैं bxslider तत्व की स्टाइल और जावास्क्रिप्ट को हटाने की कोशिश कर रहा हूं, जब ब्राउज़र विंडो किसी निश्चित आकार में घट जाती है और सूची में एक अलग शैली लागू करती है, लेकिन यह अजीब चीजें कर रही है।

502px से नीचे स्केलिंग, सबकुछ ठीक दिखता है और ठीक काम करता है, लेकिन जब वापस फिर से स्केलिंग होता है तो स्लाइडर गायब हो जाता है, लेकिन नई स्टाइल टूट जाती है। फिलहाल मैं पेज को फिर से लोड करता हूं अगर यह 502 पीएक्स के तहत चला जाता है, जो सिर्फ भयानक लगता है।

संपादित करें:

यहाँ मेरी कोड है के रूप में अनुरोध किया है, मैं एक JSFiddle के लिए प्रासंगिक HTML, जावास्क्रिप्ट और सीएसएस जोड़ दिया है: http://jsfiddle.net/tYRJ2/2/। (सीएसएस पूरा नहीं हुआ है, लेकिन यह समस्या दिखाता है।)

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

यह दिखाई देगा (और मैंने पहले यह समस्या देखी है, वास्तव में जो समाधान मैं देने वाला हूं, वह मुझे एक और छवि स्लाइडर के साथ एक ही समस्या है), "नष्ट" आदेश पूरी तरह से नष्ट नहीं कर रहा है स्लाइडर। इस तरह के मामले में, एक "आसान" चीज समय से पहले स्लाइडर के बैक अप क्लोन को सहेजना होगा, फिर इसे नष्ट करने के बाद अपने स्लाइडर को एक साथ बदलने के लिए इसका उपयोग करें।

उदाहरण:

//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 divs बनाता है यह आपके यूएल के चारों ओर लपेटता है। इसलिए यदि आप छोटे होने के लिए पूरी तरह से अलग स्टाइल चाहते हैं, तो बस अपने यूएल को एक आईडी में एक आईडी के साथ शुरू करने के लिए लपेटें, फिर उस DIV> UL के लिए सीधी स्टाइल लिखें।

उदाहरण:

एचटीएमएल

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

सीएसएस

// 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