> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# عرض الوسائط العمودي

![معاينة المعرض العمودي](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Vertical%20Media%20Carousel.png)

مكون معرض صور منتج قابل للتمرير لـ Framer يدعم التكبير والصور المصغرة العائمة الثابتة والاتجاه الأفقي/العمودي والتبديل بين صور المتغيرات.

***

## ما الذي يفعله

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

السلوكيات الرئيسية:

* **معرض صور قابل للتمرير** — تتراص الصور عموديًا (أو جنبًا إلى جنب أفقيًا) ويتمرر المستخدم عبرها بشكل طبيعي.
* **اكتشاف الصورة النشطة تلقائيًا** — أثناء التمرير، يراقب المكون الصورة الظاهرة ويبرز الصورة المصغرة المقابلة تلقائيًا.
* **صور مصغرة عائمة ثابتة** — شريط صور مصغرة على شكل حبة يطفو فوق أسفل المعرض أثناء التمرير. يظهر عند دخول المعرض نطاق العرض ويختفي عند التمرير للخارج.
* **صور مصغرة قابلة للنقر** — النقر على أي صورة مصغرة يمرر المعرض بسلاسة إلى تلك الصورة.
* **تكبير عند التحويم** — التحويم على صورة يكبّر المنطقة تحت المؤشر (يمكن تعطيله).
* **دعم المتغيرات** — يقرأ معامل URL ‏`?variant=` ويتمرر تلقائيًا إلى الصورة التي تطابق متغير المنتج المحدد.
* **الوضع الأفقي** — يرتب الصور اختياريًا في صف أفقي بدلًا من العمود العمودي.

***

## ضوابط الخصائص

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: **الصورة**، **المتغيرات**، **المعرض**، و**الصور المصغرة**.

***

### الصورة

| الخاصية   | النوع     | الافتراضي                | الوصف                                                                                                               |
| :-------- | :-------- | :----------------------- | :------------------------------------------------------------------------------------------------------------------ |
| **Image** | نص (JSON) | 4 روابط Unsplash نموذجية | مصفوفة JSON من روابط الصور لعرضها في المعرض. في Framer CMS، اربط هذا بمتغير `"Image URLs"` من مجموعة CMS الخاصة بك. |

### المتغيرات

| الخاصية      | النوع     | الوصف                                                                                                                                                                                                                               |
| :----------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Variants** | نص (JSON) | مصفوفة JSON من كائنات متغيرات المنتج، يحتوي كل منها على `id` و`image.url`. اربط هذا بمتغير `Variants` من Framer CMS. عندما يصل زائر إلى الصفحة بمعامل URL ‏`?variant=<id>`، يتمرر المعرض تلقائيًا إلى الصورة المطابقة لذلك المتغير. |

### المعرض

يتحكم في المظهر البصري وتخطيط قائمة الصور الرئيسية.

| الخاصية           | النوع      | الافتراضي  | الوصف                                                                                                         |
| :---------------- | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------ |
| **Aspect Ratio**  | نص         | `1/1`      | نسبة العرض إلى الارتفاع لكل صورة في المعرض. استخدم صيغة CSS: `1/1` (مربع)، `4/5` (عمودي)، `16/9` (أفقي)، إلخ. |
| **Orientation**   | قائمة      | `Vertical` | يتحكم في اتجاه التمرير. `Vertical` يرتب الصور من أعلى لأسفل؛ `Horizontal` يرتبها من اليسار لليمين.            |
| **Gap**           | رقم (بكسل) | `16`       | المسافة بين الصور في المعرض. النطاق: 0–100 بكسل.                                                              |
| **Border Radius** | رقم (بكسل) | `8`        | يجعل زوايا كل صورة مستديرة. النطاق: 0–50 بكسل.                                                                |
| **Enable Zoom**   | منطقي      | `true`     | عند التفعيل، يكبّر التحويم على صورة المنطقة تحت مؤشر الفأرة (تكبير 2×). عطّله لتجربة معرض ثابتة.              |

### الصور المصغرة

يتحكم في شريط التنقل بالصور المصغرة العائمة.

| الخاصية                     | النوع      | الافتراضي | الوصف                                                                                                                      |
| :-------------------------- | :--------- | :-------- | :------------------------------------------------------------------------------------------------------------------------- |
| **Show**                    | منطقي      | `true`    | مفتاح رئيسي. أوقفه لإخفاء شريط الصور المصغرة بالكامل.                                                                      |
| **Position**                | قائمة      | `Bottom`  | موضع تثبيت شريط الصور المصغرة. الخيارات: `Bottom`، `Left`، `Top`، `Right`.                                                 |
| **Thumbnail Bottom Offset** | رقم (بكسل) | `20`      | المسافة فوق الحافة السفلية للمعرض التي يطفو عندها شريط الصور المصغرة. النطاق: 0–200 بكسل. *مخفي عند إيقاف **Show**.*       |
| **Thumbnail Blur**          | رقم (بكسل) | `12`      | شدة تأثير الضبابية الزجاجية على خلفية شريط الصور المصغرة. `0` يزيل الضبابية. النطاق: 0–50 بكسل. *مخفي عند إيقاف **Show**.* |
| **Thumbnail Border Radius** | رقم (بكسل) | `20`      | يجعل زوايا حاوية شريط الصور المصغرة مستديرة. النطاق: 0–50 بكسل. *مخفي عند إيقاف **Show**.*                                 |
| **Thumbnail Active Color**  | لون        | `#3094cd` | لون الحدود الذي يبرز الصورة المصغرة النشطة حاليًا. *مخفي عند إيقاف **Show**.*                                              |
| **Thumbnail Size**          | رقم (بكسل) | `40`      | عرض وارتفاع كل صورة مصغرة. النطاق: 24–80 بكسل. *مخفي عند إيقاف **Show**.*                                                  |

## ملاحظات

* يجب تمرير روابط الصور كـ **سلسلة مصفوفة JSON** (مثال: `["https://...", "https://..."]`). يتعامل Framer CMS مع هذا تلقائيًا عند ربط المتغير الصحيح.
* تأثير التكبير مبني بالكامل على CSS transform — لا توجد مكتبة خارجية. يكبّر 2× متمركزًا على موضع الفأرة.
* يتمرر شريط الصور المصغرة أفقيًا تلقائيًا عندما يكون هناك صور مصغرة أكثر مما يتسع في المساحة المرئية.