Elementor Swiper Slider: كيف يعمل وكيفية إصلاحه

Swiper هي مكتبة JavaScript التي تعمل على تشغيل كل دائري في Elementor: Image Carousel، Media Carousel، دائري الشهادة, حلقة دائري، وكل طرف ثالث القطعة الدائرية Elementor لقد قمت بتثبيت. إنها ليست ميزة Elementor. إنها مكتبة منزلق مفتوحة المصدر يقوم Elementor بتجميعها.

معرفة أن هذا يغير كيفية تصحيح أخطاء دائري مكسور. عندما يتوقف شريط التمرير عن العمل، لا تكمن المشكلة أبدًا في عنصر واجهة المستخدم. إنه أن Swiper لم يتم تحميله أو لم تتم تهيئته أو تهيئته قبل أن يكون عرض الحاوية الخاصة به.

إصلاح سريع: توقف شريط التمرير عن العمل بعد تحديث البرنامج المساعد

إذا كنت هنا لأن دائري العمل مات فجأة، جرب هذا قبل قراءة أي شيء آخر

1. افتح البرنامج المساعد للتخزين المؤقت أو التحسين.
2. ابحث عن إعدادات JavaScript: دمج JS، وتأجيل JS، وتأخير JS.
3. قم بإيقاف تشغيل الثلاثة. مسح ذاكرة التخزين المؤقت. إعادة تحميل الصفحة.

إذا عاد الكاروسيل، فإن تحسين JS قد كسره، ويكون الإصلاح بمثابة استبعاد بدلاً من ترك التحسين. الاستثناءات الدقيقة في الأسفل.

ما يفعله Swiper في الواقع

ثلاثة عناصر متداخلة. حاوية، غلاف بداخلها، وينزلق داخلها. يقرأ Swiper عرض الحاوية، ويحسب مقدار تحريك الغلاف لكل شريحة، ويطبق تحويل CSS على الغلاف. الشرائح لا تتحرك أبدًا بشكل فردي؛ ينزلق الشريط بأكمله أسفل النافذة.

ولهذا السبب تهيمن فئتان من الأخطاء

لم يتم تشغيل البرنامج النصي. لا شيء يبدأ، لذلك ترى جميع الشرائح مكدسة أو متتالية دون أي تفاعل. عادةً ما يظل نظام Swiper's CSS موجودًا، لذا يبدو نصف مصمم وليس مكسورًا بشكل واضح.

لم يكن للحاوية عرض عند قياسها. يتم حساب التمرير السريع مقابل الصفر، لذلك تتداخل الشرائح، أو تجلس بحجم خاطئ، أو يقفز المسار. هذه هي علامة التبويب وخطأ الأكورديون: يقيس دائري داخل لوحة مخفية نفسه أثناء إخفائه.

الأشياء الخمسة التي تكسر دوارات العنصر

1. دمج جافا سكريبت وتأجيله

السبب الأكثر شيوعا بهامش واسع.

يجب تعريف Swiper قبل تشغيل رمز التهيئة المضمن. الجمع بين ملفات إعادة ترتيب JS. يؤدي التأجيل إلى دفع التنفيذ إلى ما بعد المكالمة المضمنة. يؤدي تأخير JS إلى تأخير المكتبة حتى تفاعل المستخدم، وفي ذلك الوقت تم تشغيل الحرف الأول بالفعل وفشل.

افتح وحدة تحكم المتصفح الخاصة بك. إذا رأيت Swiper is not defined أو Cannot read properties of undefinedهذه هي مشكلتك.

يثبت: استبعاد مقابض التمرير من التحسين بدلاً من تعطيلها بالجملة. في ذاكرة التخزين المؤقت LiteSpeed الموجودة ضمن تحسين الصفحة → إعدادات JS. يضيف:

swiper
elementor-frontend
jquery-core

شيء واحد يفتقده الناس في LiteSpeed: هناك حقول استبعاد منفصلة، و وضع الضيف له خاصته. إذا قمت بملء مربع استبعاد JS الرئيسي فقط، فسيرى المستخدمون الذين قاموا بتسجيل الدخول دائريًا عاملاً ولا يرى الزوار الذين قاموا بتسجيل الخروج ذلك، وهو بالضبط الخطأ الذي ينجو من الاختبار، لأنك قمت بتسجيل الدخول أثناء الاختبار. ضع نفس الاستثناءات في حقل وضع الضيف.

صاروخ WP: تحسين الملف → ملفات JavaScript مستبعدة، بالإضافة إلى نفس السلاسل ضمن تأخير تنفيذ JavaScript. التحسين التلقائي: إضافي → استبعاد البرامج النصية من التحسين التلقائي.

2. دائري داخل حاوية مخفية

تتم تهيئة دائري في علامة التبويب أو الأكورديون أو اللوحة غير القماشية أثناء وجود اللوحة display: none. يُقرأ العرض على أنه صفر، والحسابات خاطئة من الإطار الأول. افتح علامة التبويب وستحصل على شرائح متداخلة أو مسار لن يتحرك.

يثبت: تعرض معظم عناصر واجهة المستخدم إعداد “observer”. قم بتشغيله وساعات Swiper لتغيير الحجم وإعادة الحساب. إذا لم يحدث ذلك، ضع الرف الدائري في علامة التبويب الأولى، والتي تكون مرئية عند التحميل.

3. وضع الحلقة مع عدد قليل جدًا من الشرائح

تعمل الحلقة عن طريق استنساخ الشرائح لتزييف الالتفاف. يحتاج إلى ضعف عدد الشرائح لكل عرض على الأقل حتى يكون لديه ما يكفي للاستنساخ. تنتج أربع شرائح في كل ثلاث شرائح قفزة مرئية، أو فجوات فارغة، أو مسارًا يتوقف في منتصف الطريق.

يثبت: أضف شرائح، أو قم بإيقاف تشغيل الحلقة. لا يوجد إعداد يجعل الحلقة القصيرة سلسة.

4. نسختان من Swiper في صفحة واحدة

يقوم Elementor بتجميع إصدار؛ بعض الإضافات تجمع الإضافات الخاصة بها. كلاهما يسجل نفس العالمية. أي عنصر واجهة مستخدم يتم تحميله ثانيًا يفوز، وإذا تم إنشاء عنصر واجهة مستخدم مقابل واجهة برمجة تطبيقات مختلفة، فإنه ينكسر، غالبًا مع وجود خطأ حول طريقة غير موجودة.

يثبت: في وحدة التحكم، قم بالتشغيل Swiper.version. ثم قم بإلغاء تنشيط الإضافات واحدة تلو الأخرى حتى تتوقف عن التغيير. تعيد المكونات الإضافية حسنة التصرف استخدام نسخة Elementor بدلاً من شحن نسختها الخاصة. مقارنة البرنامج المساعد دائري ملاحظات أي منها يفعل.

5. تحميل كسول لمحاربة المنزلق

يمكن أن يؤدي التحميل البطيء للصور، وخاصة البرنامج الإضافي المنفصل للتحميل البطيء أعلى السمة، إلى ترك صور الشرائح على ارتفاع صفر حتى يتم تمريرها إلى العرض. إلا أنها لا يتم تمريرها أبدًا إلى العرض، لأنها على مسار أفقي. النتيجة: دائري من الصناديق الفارغة.

يثبت: قم باستبعاد فئة الصور الخاصة بالدوامة من البرنامج الإضافي للتحميل البطيء، أو قم بتعيين عرض وارتفاع واضحين على الصور بحيث تحتفظ المربعات بمساحة. دوارات الفيديو حقق هذا الأمر بقوة، لأن كل شريحة خارج الشاشة تحمل لاعبًا بالإضافة إلى صورة.

كيفية التحقق مما إذا كان Swiper محملاً أم لا

ثلاثون ثانية، ويخبرك بنصف المشكلة التي تواجهك.

1. افتح الصفحة بالدوامة المكسورة.
2. افتح وحدة تحكم المتصفح (F12، أو انقر بزر الماوس الأيمن → فحص → وحدة التحكم).
3. يكتب typeof Swiper واضغط على أدخل.

"function" يعني أن المكتبة محملة، لذا فإن مشكلتك هي التهيئة: انظر إلى الحاويات المخفية أو إعدادات الحلقة. "undefined" يعني أنه لم يصل أبدًا، والسبب هو تحسين JS أو البرنامج النصي الذي فشل في وقت سابق من السلسلة. قم بالتمرير لأعلى في وحدة التحكم للخطأ الأحمر الأول، وليس الأخير؛ الأخطاء اللاحقة عادة ما تكون نتيجة للأول.

إعدادات Swiper التي تهم في Elementor

تعرض معظم عناصر واجهة المستخدم هذه العناصر ضمن إعدادات Carousel، وأحيانًا بتسميات مختلفة

• الشرائح لكل عرض: كم عدد المرئي؛ إنه الإعداد الوحيد الذي يفصل دائري من شريط التمرير. اضبط لكل نقطة توقف دائمًا.
• الشرائح للتمرير: كم تقدم لكل نقرة. يمنحك ضبط هذا على مستوى الشرائح لكل عرض ترحيلًا على شكل صفحة؛ ضبطه على 1 يعطي إحساسًا مستمرًا.
• سرعة: مدة الانتقال بالمللي ثانية 300 إلى 500 للمعيار، أبطأ للثلاثي الأبعاد.
• تأخير التشغيل التلقائي: توقف مؤقتًا في كل شريحة. اضبط على 0 ويصبح سرادق، وهو كيف القطعة شريط التمرير الشعار يتم تكوينه عادة.
• حلقة: التفاف لا نهائي. يحتاج إلى شرائح كافية، كما هو مذكور أعلاه.
• الارتفاع التلقائي: الحاوية تتطابق مع أطول شريحة مرئية. مفيد للنص غير المستوي، ويقدم رسومًا متحركة للارتفاع يمكن أن تبدو متقلبة، لذا فهو يستحق الاختبار بدلاً من الافتراض.
• شرائح مركزية: الشريحة النشطة تقع في المنتصف بدلاً من التدفق إلى اليسار. مطلوب لتدفق الغطاء ليبدو يمينًا.

حيث تظهر هذه في الحرة القطعة الدائرية الصورة: الصورة الدائرية يحتوي على لقطات شاشة اللوحة.

هل يجب عليك تحميل Swiper الخاص بك؟

لا، في كل حالة تقريبا. نسخة Elementor موجودة بالفعل على الصفحة عند وجود عنصر واجهة مستخدم دائري، وتؤدي إضافة عنصر ثانٍ إلى تعارض الإصدار أعلاه.

الاستثناء هو شريط تمرير مخصص على الصفحة التي لا تحتوي على عنصر واجهة مستخدم Elementor carousel على الإطلاق. ثم لم يتم وضع Elementor's Swiper في قائمة الانتظار وتحتاج إلى أداة خاصة بك. قم بإدراجها بشكل مشروط، في هذا القالب فقط، حتى لا تعيد تقديم التعارض في كل مكان آخر.

الأسئلة المتداولة

إذا كان لا يزال مكسورا

العمل بهذا الترتيب: فحص وحدة التحكم أولاً (typeof Swiper)، ثم استثناءات ذاكرة التخزين المؤقت، ثم إلغاء تنشيط الإضافات واحدة تلو الأخرى في نسخة مرحلية. يجد هذا التسلسل السبب في أقل من عشر دقائق لكل حالة تقريبًا.

التصاميم المستوردة من خلال منشئ القطعة استخدم نفس بنية Swiper مثل عناصر واجهة المستخدم الخاصة بالمخزون، لذا تنطبق هذه الإصلاحات عليها أيضًا. ال صفحة التسعير يغطي أي من العشرين يحتاج إلى ترخيص.

إذا كنت تفضل البدء من شيء معروف وجيد، فكل عنصر واجهة مستخدم دائري على الحاجيات الدائرية العنصر تأتي الصفحة مع مقابض البرامج النصية الآمنة للاستبعاد الموثقة، و دليل حلقة دائري يغطي متغير الاستعلام الديناميكي لنفس المشاكل. إذا كنت تختار عنصر واجهة مستخدم بدلاً من إصلاحه، انهيار القطعة الدائرية المجانية و ال عشرين قوالب المنزلق هل المكانان للبدء.