مكون معرض صور بشريحة واحدة لـ 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.
- يخفي شريط الصور المصغرة شريط التمرير بصريًا لكنه يبقى قابلًا للتمرير عند وجود صور مصغرة أكثر من المساحة المتاحة.
- تُخفى الأسهم تلقائيًا عند وجود صورة واحدة فقط.