pagination في swiper js لا يعمل

حاول إعداد ميزة التصفح كالتالي قبل استخدام Swiper على العناصر التي تريدها:

import Swiper, { Navigation, Pagination } from 'swiper';
//..

Swiper.use([Navigation, Pagination]);

var swiper = new Swiper(...);

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

يحتمل ان يكون فقط مشكلا بتضمين ملفات التنسيقات الخاصة بالمكتبة.

قم باضافة سطري تضمين ملفات التنسيقات المستهدفة في ملف resources/sass/app.scss:

@import 'node_modules/swiper/swiper';
@import 'node_modules/swiper/modules/pagination/pagination';

تأكد ايضا من اعداد الوحدتين Navigation و Pagination مثلما وصف المدرب حسن.

ثم أعد تحزيم ملفات التنسيقات والجافاسكربت عن طريق npm run dev او npm run build واستعرض النتيجة.

السلام عليكم,

لايوجد أي خطأ في الكونسل متعلق بالحزمة

جربت فعلت تماما مثل ماقلتم لكن لاشيء جديد

والنتيجو كل شيء يعمل غير أن المتحكمات لاتعمل

بتاريخ 2 دقائق مضت قال Brahim Semmani:

لايوجد أي خطأ في الكونسل متعلق بالحزمة

جربت فعلت تماما مثل ماقلتم لكن لاشيء جديد

والنتيجو كل شيء يعمل غير أن المتحكمات لاتعمل

حاول إضافة الخواص التالية عند تهيئة Swiper واختبر مجددًا:

new Swiper(.., {
  ..
  observer: true,
  observeParents: true,
})

نفس الشيء لم تعمل 

إصدار المكتبة 

    "dependencies": {
        "swiper": "^8.3.1"
    }

بتاريخ 3 دقائق مضت قال Brahim Semmani:

نفس الشيء لم تعمل 

إصدار المكتبة 

    "dependencies": {
        "swiper": "^8.3.1"
    }

 

هل عاينت هيكلية العناصر ضمن الصفحة بعد اكتمال تحميلها، قد تكون دوائر التنقل موجودة وظاهرة لكن لها لون مماثل للخلفية ما يجعلها غير مرئية، أيضًا تأكد من تحميل شيفرات جافاسكربت ضمن الصفحة بشكل سليم عبر إضافة رسالة تطبعها إلى console مثلًا باستخدام console.log، وأمر آخر أن تتأكد من أنك تعاين ضمن الصفحة العنصر صاحب الصنف swiper-pagination، وتتأكد من أنه يحوي على عدة شرائح slides من البيانات وليس واحدة فقط

قلت أجرب سلايدر آخر يحتوي على Next & Prev و أيضا لم يظهر في البداية لكن بعد أن حددت العنصر في وضع المطور و أضفت له بعض التنسيقات ظهر ويعمل هل هذا يعني أن تنسيقات المكتة الخاصة به لم يتم إدراجها ؟

بتاريخ 4 دقائق مضت قال Brahim Semmani:

قلت أجرب سلايدر آخر يحتوي على Next & Prev و أيضا لم يظهر في البداية لكن بعد أن حددت العنصر في وضع المطور و أضفت له بعض التنسيقات ظهر ويعمل هل هذا يعني أن تنسيقات المكتة الخاصة به لم يتم إدراجها ؟

نعم أحسنت لقد حصرت المشكلة، تأكد من إرفاق تنسيقات CSS للمكتبة ضمن ملف جافاسكربت في حال كنت تستخدم محزم مثل webpack كالتالي:

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';