> ## 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/Slider%20Media%20Carousel.png)

مكون معرض صور بشريحة واحدة لـ Framer مع تنقل بالصور المصغرة وأزرار أسهم وتكبير عند التحويم وتبديل صور حسب المتغير.

***

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

يعرض **عرض الوسائط المنزلق** صورة واحدة في كل مرة ويتيح للمستخدمين التنقل بينها باستخدام أزرار الأسهم أو بالنقر على الصور المصغرة. على عكس عرض الوسائط العمودي، تُعرض صورة واحدة فقط في كل مرة — والباقي متاح عبر التنقل.

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

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

***

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

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

***

### الصورة

| الخاصية   | النوع     | الافتراضي                  | الوصف                                                                                                                |
| :-------- | :-------- | :------------------------- | :------------------------------------------------------------------------------------------------------------------- |
| **Image** | نص (JSON) | 3 روابط أحذية Nike نموذجية | مصفوفة 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` (أفقي)، إلخ. |
| **Enable Zoom**  | منطقي | `true`    | عند التفعيل، يكبّر التحويم على الصورة الرئيسية المنطقة تحت مؤشر الفأرة (تكبير 2×). عطّله لتجربة ثابتة.     |

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

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

| الخاصية      | النوع | الافتراضي | الوصف                                                                                                                                                                                                        |
| :----------- | :---- | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Position** | قائمة | `Bottom`  | موضع شريط الصور المصغرة نسبة إلى الصورة الرئيسية. الخيارات: `Bottom`، `Left`، `Top`، `Right`. المواضع الأفقية (`Top`، `Bottom`) ترتب الصور المصغرة في صف؛ المواضع العمودية (`Left`، `Right`) ترتبها في عمود. |

### الأسهم

يتحكم في أسهم التنقل السابق/التالي المعروضة على الصورة الرئيسية.

| الخاصية      | النوع | الافتراضي  | الوصف                                                                                                          |
| :----------- | :---- | :--------- | :------------------------------------------------------------------------------------------------------------- |
| **Show**     | منطقي | `true`     | مفتاح رئيسي. أوقفه لإخفاء كلا السهمين. يظهر فقط عند وجود أكثر من صورة واحدة.                                   |
| **Position** | قائمة | `Top Left` | موضع الأسهم على الصورة الرئيسية. الخيارات: `Center`، `Top Left`، `Top Right`، `Bottom Left`، `Bottom Right`.   |
| **Compact**  | منطقي | `false`    | عند التفعيل، يُجمَع كلا السهمين معًا على نفس جانب الصورة بدلًا من الجانبين المتقابلين. مفيد لتخطيط أنظف وأبسط. |

## ملاحظات

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