पेज लोड होने तक स्लाइड्स को छिपाने के लिए bxSlider कैसे प्राप्त करें?

Question

मैं ऐसी वेबसाइट बना रहा हूं जो bxSlider का उपयोग करे।

पृष्ठ लोड होने के साथ, सभी स्लाइड एक दूसरे के शीर्ष पर खड़ी दिखाई देती हैं। एक बार पृष्ठ पूरी तरह से लोड हो जाने पर, पहली स्लाइड दिखाई देती है और शेष गायब हो जाते हैं ताकि स्लाइडर एनिमेट कर सके और उन्हें एक समय में प्रदर्शित कर सके।

मैंने पृष्ठ को पूरी तरह से लोड होने तक स्लाइड्स को छिपाने के लिए विभिन्न सीएसएस और बीएक्सस्लाइडर कॉलबैक का उपयोग करने का प्रयास किया है, लेकिन कोई भाग्य नहीं है। क्या किसी को भी यह करना आता है?

धन्यवाद!

Answer 1

मैं एक ही मुद्दा था और यह चाल मेरी मदद की: स्लाइडर के उल तत्व पर

 <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;"> 

डाल ऊंचाई अतिप्रवाह मूल्यों।

बेस्ट सादर

Answer 2

एक div कि सभी सामग्री लपेटकर है रखो और उस पर एक style="display:none" डाल दिया। फिर आप bxslider को कॉल करने के बाद, बस इसे दिखाएं।

पूर्व:

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('.bxlider').bxSlider({ 
     displaySlideQty : 5, 
     prevText : "", 
     nextText : "", 
     moveSlideQty : 5, 
     infiniteLoop : false 
    }); 
    $(".bxsliderWrapper").show("fade"); 
}); 
</script> 

Answer 3

नहीं एक जवाब दर असल, लेकिन किसी को भी है कि इस बग के साथ, सभी opactity सूची आइटम का (एँ) 1 की तैयारी में हैं देखा है? मेरा मानना ​​है कि शुरुआती सेट चाइल्डरेनफेड को स्लाइड शो के इंटिलाइज़ेशन पर नहीं बुलाया जा रहा है।

अपडेट किया गया:

/** 
    * Start the slideshow 
    */ 
    this.startShow = function (changeText) { 
     if (options.mode == 'fade') { 
        setChildrenFade(); 
       } 

शुरू शो समारोह के लिए

:

मैं जोड़कर सॉर्ट करने के लिए प्रबंधित किया है।

ऐसा प्रतीत होता है कि सेट चाइल्डरेनफेड को डिज़ाइन द्वारा बुलाया नहीं जाता है जब तक कि गोटोस्लाइड कहा जाता है। हो सकता है कि यह एक बग है, क्योंकि आप केवल समस्या को ध्यान में रखते हैं यदि सूची आइटम की पृष्ठभूमि पारदर्शी पर सेट की गई है ... अन्यथा z: अनुक्रमणिका प्रारंभिक प्रारंभ पर छिपाने को संभालती है।

उम्मीद है कि इससे मदद मिलती है।

Answer 4

मैं एक ही समस्या थी और इसके चारों ओर इस तरह से है:

<div class="mySlider" style="display:none"> 

तो

$(document).ready(function(){ 
     $('.mySlider').show().bxSlider({ 
     slideWidth: 160, 
     minSlides: 2, 
     maxSlides: 5, 
     preloadImages: 'all' 
     }); 
    }); 

Answer 5

मैं बिल्कुल शैली = "प्रदर्शन: कोई नहीं" के बारे में पता नहीं है विधि है, लेकिन जब " छुपाएं()/fadeOut() "jQuery bxSlider के कंटेनर के साथ और उस init bxSlider के बाद, इसे मार्कअप में त्रुटियों के साथ प्रस्तुत किया जाएगा।(संभवतः प्रदर्शन का उपयोग कर: कोई नहीं त्रुटि से बचने के हैं, लेकिन अगर आप तुम्हारा स्लाइडर फीका करने के लिए चाहते हैं, मेरे विधि Appliable होगा)

सिर्फ bxSlider के प्रारंभ से पहले सीएसएस में और अपने जे एस में के रूप में 'पूर्ण' अपने कंटेनर की स्थिति यह पेज के अदृश्य हिस्से में जाने के लिए, यह init, और फिर इसे छुपाने के लिए, यह पूर्व बिंदु पर लौटने और अंत में fadein:

$("#bxslider-container").css({'left' : "4000px"}); 
$('.bxslider').bxSlider(); 
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000); 

आशा है कि यह

Answer 6

मदद करेंगे क्या मैं कर जोड़ दिया गया समाप्त हो गया कुछ सीएसएस को छुपाने के लिए कुछ सीएसएस।

कोई अतिरिक्त मार्कअप या व्यवहार आवश्यक नहीं है और सभी प्रमुख ब्राउज़रों में काम करता है!

.bxslider { 
    li { 
    display: none; 

    &:first-child { 
     display: block; 
    } 
    } 
} 

Answer 7

bxSlider एक कॉलबैक जब स्लाइडर भरी हुई है (onSliderLoad) .मैं एक कंटेनर div पर छिपा के लिए दृश्यता सेट और फिर दृश्यता को स्थापित करने के लिए कॉलबैक का उपयोग किया है "दिखाई।"

<div id="siteslides" style="visibility: hidden;"></div> 

$(".site_banner_slider").bxSlider({ 
    auto: true, 
    slideWidth: $imageWidth, 
    mode: 'fade', 
    onSliderLoad: function(){ 
     $("#siteslides").css("visibility", "visible"); 
     } 
    }); 

Answer 8

यह वही मुद्दा था। मैंने नीचे मार्कअप का उपयोग किया और शुरुआत में <div class="bxsliderWrapper"> को सीएसएस display: none; के साथ छुपाया, मैंने देखा कि स्लाइड्स की चौड़ाई <div class="slide"> को 1px पर प्रस्तुत किया गया था।

मुझे संदेह है कि इसमें प्रारंभिक कंटेनर के आयामों को ले जाने वाले उत्तरदायी फीचर्ड के साथ कुछ करना है, जो छिपा हुआ था, और प्रत्येक स्लाइड के लिए इनलाइन शैलियों को परिभाषित करना था।

<div class="bxsliderWrapper"> 
    <div class="bxslider"> 
    <div class="slide">Your Content</div> 
    <div class="slide">Your Content</div> 
    <div class="slide">Your Content</div> 
    </div> 
</div> 

मेरे समाधान क्या bradrice उपयोग के बारे में ऊपर उल्लेख किया है के समान है कॉल-बैक कार्यों में बनाया गया। मैंने बस reloadSlider() फ़ंक्शन को show() फ़ंक्शन में जोड़ा है।

<script type="text/javascript"> 

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
    var homeSlider = $j('.bxslider').bxSlider(); 
    $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();}); 
}); 

</script> 

यह एक बार शो() पूरा हो जाने पर पुनः लोड करने को ट्रिगर करता है।

।

संपादित

---

मूल समाधान ऊपर शुरू में काम किया, लेकिन मैं मुद्दों था जब कैश हार्ड रीफ़्रेश shift + REFRESH दौरान साफ ​​कर दिया गया। मुझे लगता है कि .show() फ़ंक्शन द्वारा लक्षित तत्वों को समय पर उपलब्ध नहीं था या संसाधन अभी तक लोड नहीं किए गए थे। (मुझे अनुमान है) नीचे इस व्यवहार के लिए एक फिक्स है।

---

इसके बजाय Bx स्लाइडर display: none; साथ <div> युक्त छुपाने का

, मैं visibility सीएसएस विशेषता का उपयोग स्लाइड छवियों को छुपा दिया।

.bxslider .slide { 
    visibility: hidden; 
} 

इस स्लाइडर जब तक वे तैयार हैं स्क्रीन पर छवियों को देखे बिना सही आकार में रेंडर करने के लिए अनुमति देता है। तब मैंने पेज 0 लोड होने के बाद दृश्यता बदलने के लिए $j(window).load() द्वारा ट्रिगर किए गए jQuery .css() विधि का उपयोग किया। इसने सुनिश्चित किया कि सभी कोड और तत्व उन्हें प्रदर्शित करने से पहले मौजूद थे।

<script type="text/javascript"> 

    var $j = jQuery.noConflict(); 

    $j(document).ready(function(){ 
    var homeSlider = $j('.bxslider').bxSlider(); 
    }); 

    $j(window).load(function(){ 
    $j(".bxslider .slide").css("visibility", "visible"); 
    }); 

</script> 

इस विधि भी कई स्लाइडर्स एक ही पृष्ठ पर साथ काम किया। मुझे .show() विधि मिली जो स्लाइडर के सभी उदाहरणों को तोड़ने के कारण हुई। मैं केवल अनुमान लगा रहा हूं कि यह एक बेहतर समाधान क्यों है लेकिन शायद कोई इसे बेहतर समझने के लिए कुछ जानकारी जोड़ सकता है।

Answer 9

पोस्ट किए गए समाधानों में से कोई भी मेरे लिए काम नहीं करता है।

का उपयोग दृश्यता: बस पृष्ठ पर एक बहुत बड़ा रिक्त स्थान में हुई छिपी हुई हैं।

किसी कारण प्रदर्शन का उपयोग कर के लिए: कोई भी स्लाइड लोड हो रहा है में से कोई भी में हुई, बस नियंत्रित करता है।

सीएसएस में:

.ctaFtSlider 
{ 
visibility: hidden; 
height: 0; 
} 

समारोह में:

$(document).ready(function(){ 
$('.bxslider').bxSlider({ 
... 
onSliderLoad: function(currentIndex){ 
$(".ctaFtSlider").css("visibility", "visible"); 
$(".ctaFtSlider").css("height", "auto"); 
} 
}); 
}); 

अंत में, HTML:

यही एक रास्ता है मैं उचित समाधान के कुछ प्रकार मिल सकता है

<div class="ctaFtSlider"> 
... 
</div> 

Answer 10

मैं ca याद नहीं है कि मुझे यह कहां मिला, लेकिन मुझे लगता है कि पृष्ठ लोड पर दिखाई देने वाली सभी स्लाइडों के इस मुद्दे को पूरा करने का यह सबसे साफ तरीका है।

पहले bxSlider बिना क्रम वाली सूची के चारों ओर एक div जोड़ें:

.bxslider-wrap { visibility: hidden; } 

अन्त में, सेट करें:

<div class="bxslider-wrap"> 
    <ul class="bxslider"> 
     <li>Image/Content </li> 
     <li>Image/Content </li> 
     <li>Image/Content </li> 
    </ul> 
</div> 

इसके बाद, अपने सीएसएस फ़ाइल जो पूरे स्लाइडर पृष्ठ लोड होने खाल में यह पंक्ति जोड़ दृश्यता के लिए स्लाइडर: स्लाइडर फिर से दृश्यमान बनाने के लिए स्लाइडर लोड होने पर jQuery (आपके जेएस फ़ाइल में) के माध्यम से दिखाई देता है!

jQuery(document).ready(function($) { 
    $('.bxslider').bxSlider({ 
     onSliderLoad: function(){ 
      $(".bxslider-wrap").css("visibility", "visible"); 
     } 
    }); 
}); 

आशा है कि इससे मदद मिलती है!

Answer 11

मैंने अपने स्लाइडर में एक शीर्षक और टेक्स्ट div जोड़ा था, इसलिए जब वे लोड हो रहे थे तो यह सब पेज के शीर्ष पर रुक गया था, इसलिए इस पोस्ट की मदद से मैंने स्लाइड तत्वों को छिपाने में कामयाब रहा लेकिन लोडिंग तत्व दिखाया :

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

jQuery(document).ready(function($) { 
$('.bxslider').bxSlider({ 
    onSliderLoad: function(){ 
     $(".slideouter").css("visibility", "visible"); 
     $(".slideloader").css("visibility", "hidden"); 
    }, 
    autoControls: true, 
    auto: true, 
    mode: 'fade' 
}); 

मुझे आशा है कि इस मदद करता है, तो slideouter div कि में छिपा हुआ है है आपका सीएसएस और स्लडलोडर आपके सीएसएस में दिखाई देता है, लेकिन दोनों स्लाइडर लोड होने के बाद स्वैप हो जाते हैं। आशा करता हूँ की ये काम करेगा।

चीयर्स, ली

Answer 12

आप मान लीजिए है:

HTML:

<ul class="slider"> 
<li>...</li> 
<li>...</li> 
</ul> 

और jQuery:

jQuery('.slider').bxSlider({ 
     ... 
}); 

तो निम्नलिखित समाधान सभी स्लाइड छुपा कर चाल करना होगा लेकिन पहला वाला।

सीएसएस:

ul.slider li:nth-child(n+2) { 
    display: none; 
} 

जब स्लाइडर पूरी तरह से भरी हुई है प्रत्येक सक्रिय स्लाइड स्वचालित रूप से शैली display: block मिल जाएगा।

Answer 13

मैंने इस सीएसएस का उपयोग किया है और यह 1200 चौड़ाई से ऊपर की स्क्रीन के लिए काम करता है क्योंकि मेरा स्लाइडर अधिकतम आकार पर चौड़ाई है, टैबलेट संस्करण अभी तक तय नहीं है, आप इस तरह पिक्सेल के बजाय% की कोशिश भी कर सकते हैं ।

। बैनर मेरे बीएक्सस्लाइडर स्लाइडर के लिए मेरा मुख्य div है।

.banner{overflow: hidden !important; height: 426px;} 
 
@media screen and (max-width: 1200px){.banner{height: auto;}}

<div class="banner"> 
 
    <div class="bx-wrapper"> 
 
     \t \t \t 
 
    </div> \t \t  \t \t  
 
</div>

Answer 14

मैं इस के समाधान के लिए सबसे की कोशिश की और पाया कि वे क्या मैं के लिए जा रहा था के लिए पर्याप्त पॉलिश नहीं थे। स्लाइडर ने इसके साथ लोड होने के बाद भी मुझे एक झटकेदार प्रस्तुति मिल रही थी। .fade() का उपयोग करना बंद था, लेकिन यह शीर्ष बाएं से नीचे दाईं ओर एनिमेट करता है जो अजीब लग रहा था। ऑनस्लाइडर लोड में हुकिंग बहुत अच्छा काम करता है, लेकिन दृश्यता बदलना अभी भी स्लाइडर को स्क्रीन पर दिखाई देता है। मैं हुक पर एक सुंदर प्रवेश द्वार की तलाश में था, मैंने सीएसएस को बदलने के बजाए एक कक्षा जोड़ा।

jQuery:

$('.slider').bxSlider({ 
    auto: false, 
    pager: false, 
    mode: 'fade', 
    onSliderLoad: function(){ 
     $(".slide-clip").addClass('-visible'); 
    } 
}); 

एस.ए.एस.एस.:

.slide-clip { 
    opacity:0; 
    max-width: 1305px; // Used as a clipping mask 
    max-height: 360px; // Used as a clipping mask 
    overflow:hidden; // Used as a clipping mask 
    margin:0 auto; 
    transition(all 275ms); 
    &.-visible { 
     transition(all 275ms); 
     opacity:1; 
    } 

}

मैं अपने स्लाइडर को मास्क करने के रूप में मैं मेरे मामले में यह के लिए एक की जरूरत है एक आवरण का उपयोग कर रहा हूँ, के लिए तो रुचि रखने वाले:

<div class="slide-clip"> 
    <ul class="slider"> 
     <li style="background-image: url('URL_HERE');"></li> 
    </ul> 
</div> 

Answer 15

आधुनिक ब्राउज़रों के लिए एक त्वरित और आसान सीएसएस-एकमात्र समाधान (IE10 +) है:

.bxslider { 
    transform: scale(0); 
} 

यह काम करता है क्योंकि शुरू में स्लाइडर कुछ भी नहीं करने के लिए कम किए जाएंगे लेकिन तब यह एक इनलाइन शैली के साथ बदलने को पार कर जाएगी जब bxSlider भार।