ابراهيم الخليل سماني نشر 18 يوليو 2022 أرسل تقرير مشاركة نشر 18 يوليو 2022 السلام عليكم, قمت بتثبيت مكتبة swiper js في لارافل وإتبعت طريقتها في وضع الكلاسات وغير إشتغل بشكل جديد غير أن النقاط التحكم التي في الأسفل لم تظهر (pagination) import Swiper from 'swiper'; import 'swiper/css/pagination'; import 'swiper/css'; var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", dynamicBullets: true, }, }); وفي html : <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> //كل شيء يعمل ماعدا هذا السطر </div> 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 18 يوليو 2022 أرسل تقرير مشاركة نشر 18 يوليو 2022 حاول إعداد ميزة التصفح كالتالي قبل استخدام Swiper على العناصر التي تريدها: import Swiper, { Navigation, Pagination } from 'swiper'; //.. Swiper.use([Navigation, Pagination]); var swiper = new Swiper(...); وتأكد من عدم وجود رسائل خطأ ضمن console، وتأكد أيضًا أن ملف جافاسكربت يتم تحميله في نهاية الصفحة، وذلك حتى تكون العناصر ضمن الصفحة قد تم تحميلها وجهزت وتستطيع التعديل عليها 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 18 يوليو 2022 أرسل تقرير مشاركة نشر 18 يوليو 2022 يحتمل ان يكون فقط مشكلا بتضمين ملفات التنسيقات الخاصة بالمكتبة. قم باضافة سطري تضمين ملفات التنسيقات المستهدفة في ملف resources/sass/app.scss: @import 'node_modules/swiper/swiper'; @import 'node_modules/swiper/modules/pagination/pagination'; تأكد ايضا من اعداد الوحدتين Navigation و Pagination مثلما وصف المدرب حسن. ثم أعد تحزيم ملفات التنسيقات والجافاسكربت عن طريق npm run dev او npm run build واستعرض النتيجة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ابراهيم الخليل سماني نشر 19 يوليو 2022 الكاتب أرسل تقرير مشاركة نشر 19 يوليو 2022 السلام عليكم, لايوجد أي خطأ في الكونسل متعلق بالحزمة جربت فعلت تماما مثل ماقلتم لكن لاشيء جديد والنتيجو كل شيء يعمل غير أن المتحكمات لاتعمل 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 19 يوليو 2022 أرسل تقرير مشاركة نشر 19 يوليو 2022 بتاريخ 2 دقائق مضت قال Brahim Semmani: لايوجد أي خطأ في الكونسل متعلق بالحزمة جربت فعلت تماما مثل ماقلتم لكن لاشيء جديد والنتيجو كل شيء يعمل غير أن المتحكمات لاتعمل حاول إضافة الخواص التالية عند تهيئة Swiper واختبر مجددًا: new Swiper(.., { .. observer: true, observeParents: true, }) 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ابراهيم الخليل سماني نشر 19 يوليو 2022 الكاتب أرسل تقرير مشاركة نشر 19 يوليو 2022 نفس الشيء لم تعمل إصدار المكتبة "dependencies": { "swiper": "^8.3.1" } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Hassan Hedr نشر 19 يوليو 2022 أرسل تقرير مشاركة نشر 19 يوليو 2022 بتاريخ 3 دقائق مضت قال Brahim Semmani: نفس الشيء لم تعمل إصدار المكتبة "dependencies": { "swiper": "^8.3.1" } هل عاينت هيكلية العناصر ضمن الصفحة بعد اكتمال تحميلها، قد تكون دوائر التنقل موجودة وظاهرة لكن لها لون مماثل للخلفية ما يجعلها غير مرئية، أيضًا تأكد من تحميل شيفرات جافاسكربت ضمن الصفحة بشكل سليم عبر إضافة رسالة تطبعها إلى console مثلًا باستخدام console.log، وأمر آخر أن تتأكد من أنك تعاين ضمن الصفحة العنصر صاحب الصنف swiper-pagination، وتتأكد من أنه يحوي على عدة شرائح slides من البيانات وليس واحدة فقط 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ابراهيم الخليل سماني نشر 19 يوليو 2022 الكاتب أرسل تقرير مشاركة نشر 19 يوليو 2022 قلت أجرب سلايدر آخر يحتوي على Next & Prev و أيضا لم يظهر في البداية لكن بعد أن حددت العنصر في وضع المطور و أضفت له بعض التنسيقات ظهر ويعمل هل هذا يعني أن تنسيقات المكتة الخاصة به لم يتم إدراجها ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Hassan Hedr نشر 19 يوليو 2022 أرسل تقرير مشاركة نشر 19 يوليو 2022 بتاريخ 4 دقائق مضت قال Brahim Semmani: قلت أجرب سلايدر آخر يحتوي على Next & Prev و أيضا لم يظهر في البداية لكن بعد أن حددت العنصر في وضع المطور و أضفت له بعض التنسيقات ظهر ويعمل هل هذا يعني أن تنسيقات المكتة الخاصة به لم يتم إدراجها ؟ نعم أحسنت لقد حصرت المشكلة، تأكد من إرفاق تنسيقات CSS للمكتبة ضمن ملف جافاسكربت في حال كنت تستخدم محزم مثل webpack كالتالي: import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
ابراهيم الخليل سماني
السلام عليكم,
قمت بتثبيت مكتبة swiper js في لارافل
وإتبعت طريقتها في وضع الكلاسات وغير إشتغل بشكل جديد غير أن النقاط التحكم التي في الأسفل لم تظهر (pagination)
وفي html :
رابط هذا التعليق
شارك على الشبكات الإجتماعية
8 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.