स्विपर जावास्क्रिप्ट लाइब्रेरी है जो एलिमेंट में हर हिंडोला को शक्ति प्रदान करता है: छवि हिंडोला, मीडिया हिंडोला, प्रशंसापत्र हिंडोला, लूप कैरोसेल, और हर तीसरे पक्ष एलिमेंटर हिंडोला विजेट आपने स्थापित किया है यह एक एलिमेंट फीचर नहीं है यह एक ओपन-सोर्स स्लाइडर लाइब्रेरी है जो एलिमेंट बंडल करता है।
यह जानते हुए कि आप कैसे बदलते हैंएक टूटे हुए हिंडोला को डीबग करें जब एक स्लाइडर काम करना बंद कर देता है, तो समस्या लगभग कभी भी विजेट नहीं होती है यह है कि स्विपर ने लोड नहीं किया, प्रारंभिक नहीं किया, या इसके कंटेनर की चौड़ाई से पहले प्रारंभिक किया।
त्वरित सुधार: प्लगइन अपडेट के बाद स्लाइडर ने काम करना बंद कर दिया
यदि आप यहां हैं क्योंकि एक काम कर रहे हिंडोला अचानक मर गया, तो कुछ और पढ़ने से पहले इसे आज़माएंः
- अपना कैशिंग या अनुकूलन प्लगइन खोलें।
- जावास्क्रिप्ट सेटिंग्स ढूंढें: जेएस को मिलाएं, जेएस को स्थगित करें, जेएस को विलंबित करें।
- तीनों को बंद करें कैश साफ़ करें पृष्ठ पुनः लोड करें।
यदि हिंडोला वापस आता है, तो जेएस अनुकूलन ने इसे तोड़ दिया, और अनुकूलन को छोड़ने के बजाय फिक्स एक बहिष्करण है सटीक बहिष्करण और नीचे।
स्विपर वास्तव में क्या करता है
तीन नेस्टेड तत्व एक कंटेनर, इसके अंदर एक आवरण, और उसके अंदर स्लाइड स्विपर कंटेनर की चौड़ाई पढ़ता है, गणना करता है कि प्रत्येक स्लाइड के लिए रैपर को कितना स्थानांतरित करना है, और रैपर पर सीएसएस परिवर्तन लागू करता है स्लाइड कभी भी व्यक्तिगत रूप से नहीं चलती हैं; पूरी पट्टी एक खिड़की के नीचे स्लाइड करती है।
यही कारण है कि बग की दो श्रेणियां हावी हैंः
स्क्रिप्ट नहीं चली। कुछ भी शुरू नहीं होता है, इसलिए आप सभी स्लाइड्स को ढेर या बिना किसी बातचीत के एक पंक्ति में देखते हैं स्विपर का सीएसएस आमतौर पर अभी भी वहां है, इसलिए यह स्पष्ट रूप से टूटने के बजाय आधा स्टाइल दिखता है।
मापने पर कंटेनर की कोई चौड़ाई नहीं थी। स्विपर शून्य के खिलाफ गणना की, तो स्लाइड ओवरलैप, गलत आकार पर बैठते हैं, या ट्रैक कूदता है यह टैब और अकॉर्डियन बग है: एक छिपे हुए पैनल के अंदर एक हिंडोला छिपा हुआ है जबकि खुद को मापता है।
एलिमेंटर हिंडोले को तोड़ने वाली पांच चीजें
1। जावास्क्रिप्ट संयोजन और स्थगित करना
एक व्यापक मार्जिन द्वारा सबसे आम कारण।
इनलाइन आरंभीकरण कोड चलने से पहले स्विपर को परिभाषित करना होगा जेएस रीऑर्डर फ़ाइलों का संयोजन स्थगित इनलाइन कॉल के पिछले निष्पादन को धक्का देता है देरी जेएस लाइब्रेरी को उपयोगकर्ता इंटरैक्शन तक वापस रखता है, जिस समय तक इनिट पहले से ही निकाल दिया गया और विफल रहा।
अपना ब्राउज़र कंसोल खोलें यदि आप देखते हैं Swiper is not defined या Cannot read properties of undefinedं, यह आपकी समस्या है।
ठीक करें: स्विपर हैंडल को थोक में अक्षम करने के बजाय अनुकूलन से बाहर करें लाइटस्पीड कैश में जो पेज ऑप्टिमाइज़ेशन → जेएस सेटिंग्स के तहत है जोड़ेंः
swiper
elementor-frontend
jquery-coreलाइटस्पीड पर एक चीज़ जो लोग चूक जाते हैं: अलग-अलग बहिष्करण फ़ील्ड हैं, और गेस्ट मोड का अपना हैयदि आप केवल मुख्य जेएस एक्सक्लूड्स बॉक्स भरते हैं, तो लॉग-इन उपयोगकर्ता एक कार्यशील हिंडोला देखते हैं और लॉग-आउट विज़िटर नहीं देखते हैं, जो वास्तव में बग है जो परीक्षण से बचता है, क्योंकि आप परीक्षण करते समय लॉग इन करते हैं अतिथि मोड फ़ील्ड में समान बहिष्करण।
डब्ल्यूपी रॉकेट: फ़ाइल अनुकूलन → जावास्क्रिप्ट फ़ाइलों को बाहर रखा गया है, साथ ही विलंब जावास्क्रिप्ट निष्पादन के तहत समान स्ट्रिंग ऑटोप्टीमाइज: अतिरिक्त → ऑटोप्टीमाइज से स्क्रिप्ट को बाहर करें।
२ छिपे हुए कंटेनर के अंदर हिंडोला
टैब, अकॉर्डियन या ऑफ-कैनवास पैनल में एक हिंडोला पैनल के रहते हुए आरंभ होता है display: noneचौड़ाई शून्य के रूप में पढ़ता है, और गणित पहले फ्रेम से गलत है टैब खोलें और आपको ओवरलैपिंग स्लाइड या एक ट्रैक मिलता है जो स्थानांतरित नहीं होगा।
ठीक करें: अधिकांश विजेट एक “ऑब्जर्वर” सेटिंग को उजागर करते हैं इसे चालू करें और आकार परिवर्तन के लिए स्विपर देखता है और पुनर्गणना करता है यदि आपका नहीं है, तो हिंडोला को पहले टैब में रखें, जो लोड पर दिखाई देता है।
बहुत कम स्लाइड के साथ लूप मोड ३
लूप रैप-अराउंड को नकली बनाने के लिए स्लाइड्स की क्लोनिंग करके काम करता है क्लोन करने के लिए पर्याप्त होने के लिए इसे स्लाइड्स-पर-व्यू गिनती के कम से कम दो बार की आवश्यकता होती है तीन-प्रति-व्यू पर चार स्लाइड एक दृश्यमान कूद, खाली अंतराल, या एक ट्रैक उत्पन्न करती है जो आधे रास्ते में बंद हो जाती है।
ठीक करें: स्लाइड जोड़ें, या लूप बंद करें कोई सेटिंग नहीं है जो एक छोटे लूप को चिकनी बनाती है।
४ एक पृष्ठ पर दो स्विपर संस्करण
एलिमेंटर एक संस्करण बंडल करता है; कुछ एडॉन्स अपने स्वयं के बंडल करते हैं दोनों एक ही वैश्विक रजिस्टर करते हैं जो भी लोड दूसरा जीतता है, और यदि एक विजेट एक अलग एपीआई के खिलाफ बनाया गया था, तो यह टूट जाता है, अक्सर एक विधि के बारे में त्रुटि के साथ जो मौजूद नहीं है।
ठीक करें: कंसोल में, चलाएं Swiper.versionफिर एक समय में एक ऐडऑन को निष्क्रिय करें जब तक कि यह बदलना बंद न हो जाए अच्छी तरह से व्यवहार किए गए प्लगइन्स अपने स्वयं के शिपिंग के बजाय एलिमेंटर की प्रतिलिपि का पुन: उपयोग करते हैं। हिंडोला प्लगइन तुलना नोट जो करते हैं।
स्लाइडर से लड़ने के लिए आलसी लोड हो रहा है ५
आक्रामक छवि आलसी लोडिंग, विशेष रूप से थीम के शीर्ष पर एक अलग आलसी-लोड प्लगइन, शून्य ऊंचाई पर स्लाइड छवियों को छोड़ सकता है जब तक कि वे दृश्य में स्क्रॉल न करें सिवाय इसके कि वे कभी भी दृश्य में स्क्रॉल नहीं करते हैं, क्योंकि वे क्षैतिज ट्रैक का परिणाम: खाली बक्से का एक हिंडोला।
ठीक करें: आलसी-लोड प्लगइन से हिंडोला की छवि वर्ग को बाहर करें, या छवियों पर स्पष्ट चौड़ाई और ऊंचाई सेट करें ताकि बक्से आरक्षित स्थान। वीडियो हिंडोला इसे सबसे कठिन मारो, क्योंकि प्रत्येक ऑफ-स्क्रीन स्लाइड में एक खिलाड़ी के साथ-साथ एक छवि भी होती है।
कैसे जांचें कि स्विपर लोड किया गया है या नहीं
तीस सेकंड, और यह आपको बताता है कि आपको कौन सी आधी समस्या है।
- टूटे हिंडोले से पृष्ठ खोलें।
- ब्राउज़र कंसोल खोलें (F12, या राइट-क्लिक करें → निरीक्षण करें → कंसोल)।
- प्रकार
typeof Swiperऔर एंटर दबाएं।
"function" इसका मतलब है लाइब्रेरी लोड हो गई है, इसलिए आपकी समस्या आरंभीकरण है: छिपे हुए कंटेनरों या लूप सेटिंग्स को देखें। "undefined" इसका मतलब है कि यह कभी नहीं आया, और इसका कारण जेएस अनुकूलन या एक स्क्रिप्ट है जो श्रृंखला में पहले विफल हो गया था पहली लाल त्रुटि के लिए कंसोल में स्क्रॉल करें, आखिरी नहीं; बाद की त्रुटियाँ आमतौर पर पहली के परिणाम होती हैं।
स्विपर सेटिंग्स जो एलिमेंटर में मायने रखती हैं
अधिकांश विजेट इन्हें कैरोसेल सेटिंग्स के तहत उजागर करते हैं, कभी-कभी विभिन्न लेबल के साथः
- प्रति दृश्य स्लाइड: कितने दिखाई दे रहे हैं; यह एक सेटिंग है जो अलग हो जाती है एक स्लाइडर से एक हिंडोला. हमेशा प्रति ब्रेकप्वाइंट सेट करें।
- स्क्रॉल करने के लिए स्लाइड: प्रति क्लिक कितने अग्रिम। इसे स्लाइड-प्रति-दृश्य के बराबर सेट करने से आपको पेज-शैली पेजिंग मिलती है; इसे 1 पर सेट करने से निरंतर अनुभव मिलता है।
- गति: मानक के लिए एमएस में संक्रमण अवधि 300 से 500, 3डी के लिए धीमी।
- ऑटोप्ले विलंबः प्रत्येक स्लाइड पर विराम ० पर सेट करें और यह एक हो जाता है मार्की, जो इस प्रकार है लोगो स्लाइडर विजेट आमतौर पर कॉन्फ़िगर किया गया है।
- लूप: अनंत लपेटें। जैसा कि ऊपर बताया गया है, पर्याप्त स्लाइड की आवश्यकता है।
- ऑटो ऊंचाई: कंटेनर सबसे लंबा दृश्यमान स्लाइड से मेल खाता है असमान पाठ के लिए उपयोगी है, और यह एक ऊंचाई एनीमेशन पेश करता है जो कूद सकता है, इसलिए यह मानने के बजाय परीक्षण के लायक है।
- केंद्रित स्लाइड: सक्रिय स्लाइड बाईं ओर फ्लश करने के बजाय केंद्र में बैठती है। कवरफ़्लो को दाएँ देखने की आवश्यकता है।
जहां ये फ्री में दिखाई देते हैं छवि हिंडोला विजेट: छवि हिंडोला वॉकथ्रू पैनल स्क्रीनशॉट है।
क्या आपको अपना स्विपर लोड करना चाहिए?
नहीं, लगभग हर मामले में एलिमेंट की कॉपी पहले से ही पृष्ठ पर है जब भी एक हिंडोला विजेट मौजूद होता है, और दूसरा एक जोड़ने से ऊपर संस्करण संघर्ष होता है।
अपवाद एक पृष्ठ पर एक कस्टम स्लाइडर है जिसमें कोई एलिमेंट कैरोसेल विजेट बिल्कुल नहीं है फिर एलिमेंट का स्विपर एनक्यूड नहीं है और आपको अपनी खुद की आवश्यकता है इसे सशर्त रूप से, केवल उस टेम्पलेट पर एनक्यू करें, ताकि आप हर जगह संघर्ष को फिर से शुरू न करें।
अक्सर पूछे जाने वाले प्रश्न
एलिमेंट में स्विपर क्या है?
स्विपर ओपन-सोर्स जावास्क्रिप्ट स्लाइडर लाइब्रेरी है जो एलिमेंट अपने सभी हिंडोला और स्लाइडर विजेट के लिए उपयोग करता है एलिमेंट इसे बंडल करता है और जब भी पृष्ठ पर एक हिंडोला विजेट दिखाई देता है तो इसे एनक्यूज़ करता है अधिकांश तृतीय-पक्ष एलिमेंट कैरोसेल एडोन अपने स्वयं के शिपिंग के बजाय एक ही प्रतिलिपि का उपयोग करते हैं।
मेरा एलिमेंटर स्विपर स्लाइडर काम क्यों नहीं कर रहा है?
दस में से नौ बार यह कैशिंग प्लगइन से जावास्क्रिप्ट अनुकूलन है: जेएस को स्क्रिप्ट को फिर से व्यवस्थित करने के लिए गठबंधन, स्थगित या देरी करें ताकि इनिट कोड चलने पर स्विपर परिभाषित न हो उन तीन को बंद करें और पुनः लोड करें यदि स्लाइडर वापस आता है, तो जोड़ें swiper, elementor-frontend और jquery-core अनुकूलन को अक्षम छोड़ने के बजाय प्लगइन के जेएस बहिष्करणों के लिए।
मैं कैसे ठीक करूं “स्वाइपर परिभाषित नहीं है”?
आरंभीकरण कोड चलने से पहले लाइब्रेरी लोड नहीं हुई थी जेएस संयोजन से स्विपर को बाहर करें, अपने कैश प्लगइन में स्थगित और देरी करना लाइटस्पीड पर, अतिथि मोड फ़ील्ड के साथ-साथ मुख्य में बहिष्करण जोड़ें, अन्यथा यह लॉग-इन उपयोगकर्ताओं के लिए काम करता है और आगंतुकों के लिए टूट जाता है।
एलिमेंटर किस स्विपर संस्करण का उपयोग करता है?
यह एलिमेंटर रिलीज के साथ बदलता है कंसोल खोलकर और चलाने के द्वारा हिंडोला के साथ किसी भी पृष्ठ पर इसे जांचें Swiper.version। यदि वह आपकी अपेक्षा से भिन्न संख्या लौटाता है, तो एक ऐडऑन अपनी स्वयं की प्रतिलिपि लोड कर रहा है और एलिमेंटर्स को ओवरराइड कर रहा है।
मेरी स्लाइड एक दूसरे के ऊपर ओवरलैप या स्टैक क्यों करती हैं?
स्विपर ने कंटेनर को शून्य चौड़ाई पर मापा, आमतौर पर क्योंकि हिंडोला एक छिपे हुए टैब, अकॉर्डियन या पॉपअप के अंदर बैठता है पृष्ठ लोड पर पर्यवेक्षक सेटिंग सक्षम करें ताकि यह कंटेनर दिखाई देने पर पुनर्गणना करे, या हिंडोला को एक पैनल में ले जाए जो डिफ़ॉल्ट रूप से खुला है।
लॉग इन करने पर मेरा हिंडोला क्यों काम करता है लेकिन आगंतुकों के लिए नहीं?
कैशिंग लॉग-इन उपयोगकर्ता आम तौर पर कैश को बायपास करते हैं और अनऑप्टिमाइज्ड स्क्रिप्ट प्राप्त करते हैं, इसलिए स्लाइडर काम करता है आगंतुकों को कैश, संयुक्त और स्थगित संस्करण मिलता है और यह टूट जाता है एक निजी विंडो में परीक्षण करें, और अपने कैश प्लगइन में एक अलग अतिथि या अप्रमाणित बहिष्करण सूची की जांच करें।
अगर यह अभी भी टूटा हुआ है
इस क्रम में काम करें: कंसोल पहले जांचें (typeof Swiper), फिर कैश बहिष्करण, फिर एक स्टेजिंग कॉपी में एक समय में एक ऐडऑन को निष्क्रिय करें वह अनुक्रम लगभग हर मामले के लिए दस मिनट के भीतर कारण ढूंढता है।
के माध्यम से डिज़ाइन आयात किए गए विजेट बिल्डर स्टॉक विजेट के समान स्विपर बिल्ड का उपयोग करें, इसलिए ये सुधार उन पर भी लागू होते हैं। द मूल्य निर्धारण पृष्ठ कवर करता है कि बीस में से किसे लाइसेंस की आवश्यकता है।
यदि आप किसी ज्ञात-अच्छी चीज़ से शुरुआत करना चाहते हैं, तो प्रत्येक हिंडोला विजेट एलिमेंटर हिंडोला विजेट पेज को बहिष्करण-सुरक्षित स्क्रिप्ट के साथ प्रलेखित हैंडल के साथ भेजा जाता है, और लूप कैरोसेल गाइड समान समस्याओं के गतिशील-क्वेरी संस्करण को कवर करता है यदि आप एक विजेट को ठीक करने के बजाय चुन रहे हैं, तो मुक्त हिंडोला विजेट टूटना और द बीस स्लाइडर टेम्पलेट्स शुरू करने के लिए दो स्थान हैं।
