مكون معرض صور منتج قابل للتمرير لـ Framer يدعم التكبير والصور المصغرة العائمة الثابتة والاتجاه الأفقي/العمودي والتبديل بين صور المتغيرات.
ما الذي يفعله
يعرض عرض الوسائط العمودي قائمة من صور المنتج في معرض قابل للتمرير. أثناء تمرير المستخدم عبر الصور، تظهر شريط صور مصغرة عائم في أسفل المعرض — مما يتيح للمستخدمين القفز إلى أي صورة بالنقر على صورتها المصغرة. السلوكيات الرئيسية:- معرض صور قابل للتمرير — تتراص الصور عموديًا (أو جنبًا إلى جنب أفقيًا) ويتمرر المستخدم عبرها بشكل طبيعي.
- اكتشاف الصورة النشطة تلقائيًا — أثناء التمرير، يراقب المكون الصورة الظاهرة ويبرز الصورة المصغرة المقابلة تلقائيًا.
- صور مصغرة عائمة ثابتة — شريط صور مصغرة على شكل حبة يطفو فوق أسفل المعرض أثناء التمرير. يظهر عند دخول المعرض نطاق العرض ويختفي عند التمرير للخارج.
- صور مصغرة قابلة للنقر — النقر على أي صورة مصغرة يمرر المعرض بسلاسة إلى تلك الصورة.
- تكبير عند التحويم — التحويم على صورة يكبّر المنطقة تحت المؤشر (يمكن تعطيله).
- دعم المتغيرات — يقرأ معامل URL
?variant=ويتمرر تلقائيًا إلى الصورة التي تطابق متغير المنتج المحدد. - الوضع الأفقي — يرتب الصور اختياريًا في صف أفقي بدلًا من العمود العمودي.
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: الصورة، المتغيرات، المعرض، والصور المصغرة.الصورة
المتغيرات
المعرض
يتحكم في المظهر البصري وتخطيط قائمة الصور الرئيسية.الصور المصغرة
يتحكم في شريط التنقل بالصور المصغرة العائمة.ملاحظات
- يجب تمرير روابط الصور كـ سلسلة مصفوفة JSON (مثال:
["https://...", "https://..."]). يتعامل Framer CMS مع هذا تلقائيًا عند ربط المتغير الصحيح. - تأثير التكبير مبني بالكامل على CSS transform — لا توجد مكتبة خارجية. يكبّر 2× متمركزًا على موضع الفأرة.
- يتمرر شريط الصور المصغرة أفقيًا تلقائيًا عندما يكون هناك صور مصغرة أكثر مما يتسع في المساحة المرئية.