AMP

amp-carousel

منصّة عرض بعناصر متغيّرة لعرض عدة عناصر محتوى متشابهة متغيّرة على محور أفقي؛ وتهدف إلى توفير مرونة عالية وأداء عالٍ.

النص البرمجي المطلوب <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
التنسيقات المعتمدة
  • منصّة عرض بعناصر متغيّرة: fixed وfixed-height وnodisplay.
  • الشرائح: fill وfixed وfixed-height وflex-item وnodisplay وresponsive.
أمثلة من موقع "AMP بالمثال":

السلوك

يُعتبر كل عنصر من العناصر الثانوية المباشرة للمكوِّن amp-carousel عنصرًا في منصّة عرض بعناصر متغيّرة. قد يكون لكل من هذه العقد أيضًا عناصر HTML ثانوية عشوائية.

تتكون منصّة العرض ذات العناصر المتغيّرة من عدد عشوائي من العناصر بالإضافة إلى أسهم اختياريّة للتنقل للتقدم إلى عنصر أو الرجوع إلى آخر.

تتنقل منصّة العرض ذات العناصر المتغيّرة بين العناصر عند تمرير المستخدِم سريعًا أو استخدام مفاتيح الأسهم أو النقر على أسهم التنقل الاختياريّة.

<amp-carousel width="450"
  height="300">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
Open this snippet in playground

التقدم إلى شريحة محددة

سيؤدي تعيين طريقة للسمة on في عنصر لتنفيذ tap:carousel-id.goToSlide(index=N)، عند نقر المستخدِم، إلى انتقال منصّة عرض بعناصر متغيّرة ذات المعرف "carousel-id" إلى الشريحة بالفهرس index=N (ستكون الشريحة الأولى عند index=0 والشريحة الثانية عند index=1 وهكذا).

في المثال التالي، لدينا منصّة عرض بثلاث صور مع أزرار معاينة أسفل المنصّة. عندما ينقر المستخدِم على أحد الأزرار، يتم عرض عنصر المنصّة المقابل.

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/static/inline-examples/images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="/static/inline-examples/images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="/static/inline-examples/images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="/static/inline-examples/images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="/static/inline-examples/images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="/static/inline-examples/images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>
Open this snippet in playground

السمات

type تحدد نوع العرض عناصر منصّة العرض ذات العناصر المتغيّرة، والذي يمكن أن يكون:
  • carousel (تلقائي): يتم عرض جميع الشرائح وتكون قابلة للتمرير أفقيًا. يتيح هذا النوع التنسيقات التالية فقط: fixed وfixed-height وnodisplay.
  • slides: يعرض هذا النوع شريحة واحدة في المرة. يتيح هذا النوع التنسيقات التالية: fill وfixed وfixed-height وflex-item وnodisplay وresponsive.
height (مطلوبة) تحدد ارتفاع منصّة العرض بالبكسل.
controls (اختياريّة) تعرض بشكل دائم السهم الأيمن والأيسر للمستخدِم للتنقل بين عناصر منصّة العرض على أجهزة الجوال. تختفي أسهم التنقل تلقائيًا بعد بضع ثوانٍ على الهاتف الجوال. يمكن أيضًا التحكم في رؤية الأسهم من خلال التصميم، ويمكن استخدام الاستعلام عن الوسائط لعرض الأسهم فقط في عرض شاشات معينة. على جهاز كمبيوتر سطح المكتب، يتم دائمًا عرض الأسهم ما لم يكن هناك عنصر ثانوي واحد.
data-next-button-aria-label (اختياريّة) تعيّن السمة aria-label لـ amp-carousel-button-next. في حال عدم توفير أي قيمة، سيتم تعيين القيمة التلقائية للسمة aria-label على 'Next item in carousel'.
data-prev-button-aria-label (اختياريّة) تعيّن السمة aria-label لـ amp-carousel-button-prev. في حال عدم توفير أي قيمة، سيتم تعيين القيمة التلقائية للسمة aria-label' على 'Previous item in carousel'.
data-button-count-format (اختياريّة) سلسلة تنسيق تأخذ الشكل (%s of %s) وتستخدم كلاحقة للسمة aria-label لـ amp-carousel-button-next/amp-carousel-button-prev. ويوفر هذا معلومات لمستخدِمي قارئ الشاشة عن مدى تقدمهم في منصّة العرض. في حال عدم توفير أي قيمة، سيتم تعيين القيمة التلقائية على '(%s of %s)'.
autoplay (اختياريّة) تعمل على التقدم إلى الشريحة التالية بدون تدخل من المستخدِم.
في حال توفرها بدون قيمة:
  • بشكل تلقائي، تعمل على الانتقال إلى الشريحة التالية بفاصل زمني 5000 ملي ثانية (5 ثوانٍ)، ويمكن إلغاء هذا من خلال السمة delay.
  • تعمل على إرفاق السمة loop بالمكّوِن amp-carousel في حال عدم توفر loop.
  • يتطلب توفر شريحتين على الأقل حتى يحدث التشغيل التلقائي.
  • تنطبق فقط على منصّات عرض بعناصر متغيّرة من النوع type = slides.
في حال توفرها بقيمة:
  • تعمل على إرفاق السمة loop بالمكّوِن amp-carousel في حال عدم توفر loop.
  • تزيل السمة loop بعد الوصول إلى عدد مرات التكرار المطلوب.
delay (اختياريّة) تحدد مدة (بالملي ثانية) فاصل الانتقال إلى الشريحة التالية عند تفعيل autoplay. لا تنطبق السمة delay إلا على منصات العرض من النوع type=slides.
loop (اختياريّة) تسمح للمستخدِم بالتقدم بعد العنصر الأول أو العنصر الأخير. ويجب أن يكون هناك 3 شرائح على الأقل حتى يحدث التكرار. لا تنطبق السمة loop إلا على منصات العرض من النوع type=slides. مثال: لعرض منصّة عرض بعناصر متغيّرة من النوع slides مع عناصر التحكم والتكرار والتشغيل التلقائي المتأخر
wzxhzdk:2
Open this snippet in playground
السمات المشتركة يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات AMP.

التصميم

  • يمكنك استخدام محدد العنصر amp-carousel لتصميمه بحرية.
  • يمكنك استخدام محدد الفئة .amp-carousel-slide لاستهداف عناصر منصّة العرض.
  • يكون زر amp-carousel مخفيًا عند تعطيله.
  • بشكل تلقائي، يستخدم .amp-carousel-button صورة SVG مضمّنة كصورة background-image للأزرار. يمكنك إلغاء ذلك باستخدام صورة SVG أو صورة خاصة بك كما في المثال أدناه.

مثال: صورة SVG مضمّنة تلقائيًا للزر .amp-carousel-button

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

مثال: إلغاء صورة SVG المضمنّة تلقائيًا للزر .amp-carousel-button

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

التحقق

اطِّلع على قواعد amp-carousel في مواصفات مدقق AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub