bxslider लोड पर गलत व्यूपोर्ट आकार की गणना

Question

वैसे भी मैंने हाल ही में bxslider का उपयोग करना शुरू कर दिया है और मुझे इसके साथ कोई समस्या है।

यह पृष्ठ लोड है, यह मोबाइल उपकरणों, टेबलेट आदि पर अच्छी तरह से काम नहीं करता है, जिसका अर्थ है पर गलत तरीके से अपने व्यूपोर्ट आकार की गणना करने लगता है

अजीब बात यह है कि जब मैं (ब्राउज़र की विंडो का आकार बदलने भी बस एक पिक्सेल के लिए) व्यूपोर्ट ऊंचाई सही ढंग से गणना की जाती है और सब ठीक दिखता है। लेकिन अगर मैंने उसी ऊंचाई और चौड़ाई वाले पृष्ठ को रीफ्रेश किया है तो बीएक्स-व्यूपोर्ट की सही गणना नहीं की जाएगी।

कोई विचार यह क्यों हो रहा है?

एचटीएमएल कुछ इस तरह दिखता है (और हाँ मुझे पता है कि यह शायद यह से कोई लेना देना नहीं मिला है, लेकिन अभी भी):

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 

jQuery('.up-control').click(function() { 
    slider.goToNextSlide(); 
}); 
jQuery('.down-control').click(function() { 
    slider.goToPrevSlide(); 
}); 

:

<ul class="seminars-slider"> 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 

    // same li 
    <li> 
     <article class="education-article"> 
      <h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3> 
      <p>LOL1</p> 
      <div class="buttons"> 
       <a href="#" class="book-button"><span>Book now</span></a> 
       <a href="#" class="read-more"><span>Read more</span></a> 
      </div> 
      <div class="clearall"></div> 

     </article> 
    <div class="clearall"></div> 
    </li> 
</ul>   

js कॉल की तरह दिखता है

धन्यवाद।

Answer 1

यह हो सकता है कि आप bxSlider फ़ंक्शन को बहुत जल्दी कॉल कर रहे हों। आप

$(document).ready(function() { ... });

से लागू कर रहे हैं के बजाय

$(window).load(function() { ... });

का उपयोग कर विचार उन दो कार्यों का उपयोग कर के बीच अंतर यह है कि (दस्तावेज़) डोम तक .ready प्रतीक्षा करता है दिखाया गया है है उपयोगकर्ता की प्रारंभिक स्थिति में, जबकि (विंडो) .load वास्तव में तब तक प्रतीक्षा करता है जब तक सभी संसाधनों को डीओएम पर लोड नहीं किया जाता है।

Answer 2

यदि आप AJAX के साथ <ul> तत्व लोड कर रहे हैं और इसमें छवियां हैं, तो लोड के बाद slider.reloadSlider(); आज़माएं। सबसे पहले मैं छवियों को लोड करने के लिए के लिए प्रतीक्षा करने

setTimeout('slider.reloadSlider()',1000); 

इस्तेमाल किया, लेकिन अंत में मैं अच्छा पुस्तकालय ImagesLoaded कि लोड करने के लिए छवियों के लिए इंतजार करेंगे में स्विच:

imagesLoaded('.seminars-slider', function() { 
    slider.reloadSlider(); 
}); 

(करने के लिए चर नाम बदल प्रश्न के उनसे मेल करें)

Answer 3

bxslider github पृष्ठ पर "romelmederos" का सुझाव दिया गया;

---

"BxSlider v4.1 -। स्लाइडर का प्रतिपादन के बाद से मैं मोबाइल के लिए एक संवेदनशील वेब साइट में ऊंचाई के लिए प्रतिशत उपयोग कर रहा हूँ के साथ होने मुद्दों

तो मैं परिवर्तन करने के लिए किया था से: स्लाइडर.viewport.css ('ऊंचाई', getViewportHeight()); इस पर: स्लाइडर.व्यूपोर्ट।सीएसएस ('ऊंचाई', '');

मैं बजाय मेरी कॉपी में एक विकल्प के साथ प्लगइन बदल दिया है, लेकिन बदलने के लिए तेज तरीका "ऊपर

---

मैं लाइन 1290 पर मेरे jquery.bxslider.js संपादित लाइन को संशोधित करके है, यह काम किया मेरे लिए महान और window.load तुलना में एक बेहतर समाधान है, लगता है (जब तक सब कुछ भरी हुई window.load स्लाइडर का पर्दाफाश किया गया है।)

Answer 4

आप

slider=jQuery('.seminars-slider').bxSlider({ 
    mode: 'vertical', 
    controls:false, 
    pager:false, 
    minSlides:2, 
    maxSlides:2, 
    moveSlides:1 
}); 
setTimeout(function(){ 
      slider.redrawSlider(); 
     },100); 

Answer 5

मैथ्यू डब्ल्यू उपयोग कर सकते हैं atson मुझे एक अच्छा विचार दे दी है और मैं प्लगइन में चला गया और अद्यतन इसलिए की तरह वास्तविक getViewPortHeight() फ़ंक्शन:

var getViewportHeight = function(){ 
    var height = 0; 
    children = slider.children; 
    height = jQuery(slider.children[0]).height();; 
    return height; 
} 

तो अब यह वहाँ में पहली छवि की ऊंचाई ले जा रहा है (उम्मीद वे सभी एक ही कर रहे हैं ...) और स्लाइडर की ऊंचाई निर्धारित करने के लिए इसका उपयोग कर रहे हैं। कृपया ध्यान दें, आपके नियंत्रण अभी भी स्लाइडर के नीचे बैठेंगे, लेकिन इसे सीएसएस पोजीशनिंग आदि के साथ तय किया जा सकता है।

आशा है कि इससे कुछ खोए लोगों को वहां मदद मिलेगी।

Answer 6

इस सफारी बग के लिए एक समाधान मिला। आपके पास क्षैतिज पर स्लाइडर का मोड होना चाहिए (सुनिश्चित नहीं है कि ऊर्ध्वाधर काम भी है लेकिन फीका बिल्कुल काम नहीं कर रहा है)। फिर आपको पहली छवि की ऊंचाई प्राप्त करनी होगी और इसे ".bx-viewport" में पास करना होगा। यहां बताया गया है कि मेरी स्क्रिप्ट कैसी दिखती है:

$("img.Banner").attr("id", "first-slide"); 
$('.bxslider').bxSlider({ 
    adaptiveHeight: true, 
    mode: 'horizontal', 
    auto: true 
    }); 
$("#first-slide").load(function(){ 
    var height = $(this).height(); 
    $(".bx-viewport").css("height", height); 
});