AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-carousel

Description

Displays multiple similar pieces of content along a horizontal axis.

 

Required Scripts

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Supported Layouts

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

النص البرمجي المطلوب <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>
فتح هذه القصاصة في الساحة

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

سيؤدي تعيين طريقة للسمة 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>
فتح هذه القصاصة في الساحة

السمات

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 مع عناصر التحكم والتكرار والتشغيل التلقائي المتأخر 
<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide">
  <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>
فتح هذه القصاصة في الساحة
السمات المشتركة يتضمن هذا العنصر السمات المشتركة التي تشمل مكونات 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.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub