فيما يلي مثال خطوة بخطوة لإنشاء دائري بسيط باستخدام Alpine.js. Alpine.js هو إطار عمل جافا سكريبت خفيف الوزن يوفر إمكانية التفاعل ويمكن استخدامه لإنشاء مكونات تفاعلية دون استخدام الكثير من JavaScript.

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

الخطوة 1: إعداد HTML وتضمين Alpine.js

أولاً، سنقوم بتضمين Alpine.js في رأس ملف HTML الخاص بنا. يمكنك القيام بذلك عن طريق إضافة علامة البرنامج النصي التالية:

الخطوة 2: هيكل مكون الكاروسيل

داخل النص، قم بإنشاء div للمكون الدائري وقم بتهيئته باستخدام بيانات x لتحديد خصائص وطرق Alpine.js.

  
  Previous

  
  Next

الخطوة 3: تحديد بيانات وطرق Alpine.js

سنقوم الآن بتعريف وظيفة الرف الدائري في مكون Alpine، مع ضبط البيانات الأولية وطرق التنقل بين الصور.

شرح المكون

1. هيكل HTML الدائري:

   • الزر السابق: عند النقر عليه، فإنه يستدعي الطريقة السابقة للانتقال إلى الصورة السابقة.
   • الصور: نستخدم x-for للتنقل بين الصور وربط سمة src. يطبق ربط الفئة: الفئة النشطة على الصورة الحالية، مما يجعلها مرئية.
   • الزر التالي: عند النقر عليه، فإنه يستدعي الطريقة التالية للانتقال إلى الصورة التالية.

2. بيانات وطرق Alpine.js:

   • currentIndex: يتتبع الصورة الحالية التي يتم عرضها.
   • الصور: مصفوفة تحتوي على عناوين URL لصور الرف الدائري.
   • startAutoPlay() وstopAutoPlay(): بدء التشغيل التلقائي وإيقافه بفاصل زمني مدته 3 ثوانٍ.
   • next(): زيادات الفهرس الحالي. إذا تجاوز عدد الصور، فإنه يعيد التعيين إلى البداية.
   • prev(): إنقاص الفهرس الحالي. إذا انخفض إلى ما دون الصفر، فإنه يلتف حول الصورة الأخيرة.
   • init(): يبدأ التشغيل التلقائي عند تهيئة الرف الدائري.

الخطوة 4: تصميم الكاروسيل

أضفنا أنماط CSS الأساسية للدائرة والأزرار لتحديد المواقع والرؤية. تمنح انتقالات CSS الصور تأثير التلاشي.

الخطوة 5: التشغيل التلقائي وعناصر التحكم القابلة للنقر

• التشغيل التلقائي: التشغيل التلقائي باستخدام startAutoPlay() في init().
• عناصر التحكم بالنقر: تعمل الأزرار على تشغيل وظائف prev() وnext() للتنقل بين الشرائح.

ملخص

• يتم استخدام Alpine.js للتفاعل، مما يجعل الرف الدائري خفيف الوزن وسريع الاستجابة.
• تحولات CSS تنشئ تأثير التلاشي مع تغير الصور.
• نقرات الزر تؤدي إلى تشغيل طرق جبال الألب لسهولة التنقل.

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

تواصل معي:@ LinkedIn واطلع على محفظتي.

يرجى منح مشاريعي على GitHub نجمة ⭐️

كود المصدر