AMP

Important: this component does not support your currently selected format stories!

amp-carousel

Bir yatay eksen boyunca birden çok benzer içerik parçasını görüntülemek için genel bir bant; son derece eksek ve yüksek performanslı olması amaçlanmıştır.

Zorunlu Komut Dosyası <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Desteklenen Düzenler
  • bant: fixed, fixed-height, and nodisplay.
  • slaytlar: fill, fixed, fixed-height, flex-item, nodisplay, and responsive.
Örnekler Örneklerle AMP:

Davranış

amp-carousel bileşeninin en yakın alt öğelerinin her biri, banttaki bir öğe olarak kabul edilir. Bu düğümlerin her birinde rastgele HTML alt öğeleri de olabilir.

Bant, rastgele sayıda öğeden ve tek bir öğe ileri veya geri gitmek için isteğe bağlı gezinme oklarından oluşur.

Kullanıcı kaydırırsa, ok tuşlarını kullanırsa veya isteğe bağlı bir gezinme okunu tıklarsa bant ilerler.

<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

Belirli bir slayda ilerleme

Bir öğede on özelliğinin yönteminin tap:carousel-id.goToSlide(index=N) olarak ayarlanması, kullanıcı dokunduğunda veya tıkladığında "carousel-id" kimliğine sahip bir bandı index=N konumundaki slayda ilerletir (ilk slayt index=0, ikinci slayt index=1 konumundadır ve diğer slaytların konum değeri bu düzenle devam eder).

Aşağıdaki örnekte, bandın altında önizleme düğmeleri olan, üç resimden oluşan bir bant vardır. Kullanıcı düğmelerden birini tıkladığında ilgili bant öğesi görüntülenir.

<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

Özellikler

# Stil
type Bant öğeleri için görüntüleme türünü belirtir. Bu türler şunlar olabilir:
  • carousel (varsayılan): Tüm slaytlar gösterilir ve yatay olarak kaydırılabilir. Bu tür yalnızca şu düzenleri destekler: fixed, fixed-height ve nodisplay.
  • slides: Her defasında tek bir slayt gösterir. Bu tür şu düzenleri destekler: fill, fixed, fixed-height, flex-item, nodisplay ve responsive.
height (zorunlu) Bandın yüksekliğini piksel cinsinden belirtir.
controls (isteğe bağlı) Kullanıcının mobil cihazlarda bant öğelerinde gezinmesi için kalıcı olarak sol ve sağ oklar görüntüler. Varsayılan olarak, mobil cihazlarda gezinme okları birkaç saniye sonra kaybolur. Okların görünürlüğü şekillendirme aracılığıyla da kontrol edilebilir ve okları yalnızca belirli ekran genişliklerinde görüntülemek için bir medya sorgusu kullanılabilir. Masaüstünde, sadece tek bir alt öğe olmadığı sürece oklar her zaman görüntülenir.
data-next-button-aria-label (isteğe bağlı) amp-carousel-button-next için aria etiketini ayarlar. Herhangi bir değer verilmezse aria etiketi, varsayılan olarak "Banttaki bir sonraki öğe"' değerine ayarlanır.
data-prev-button-aria-label (isteğe bağlı) amp-carousel-button-prev için aria etiketini ayarlar. Herhangi bir verilmezse aria etiketi, varsayılan olarak "Banttaki bir önceki öğe" değerine ayarlanır.
data-button-count-format (isteğe bağlı) amp-carousel-button-next/amp-carousel-button-prev için aria etiketinin son eki olarak kullanılan (%s of %s) gibi görünen bir biçim dizesi. Bu, ekran okuyucusu kullanan kullanıcılara banttaki ilerlemeleri hakkında bilgi sağlar. Herhangi bir değer verilmezse bu öğe varsayılan olarak "(%s of %s)" değerine ayarlanır.
autoplay (isteğe bağlı) Slaydı, kullanıcı etkileşimi olmadan bir sonraki slayda ilerletir.
Bir değer olmadan mevcutsa:
  • Varsayılan olarak, 5000 milisaniyelik (5 saniye) aralıklarda bir slayt ilerler; bu süre, delay özelliğiyle geçersiz kılınabilir.
  • loop özelliği önceden mevcut değilse loop özelliğini amp-carousel öğesine ekler.
  • Otomatik oynatmanın gerçekleşmesi için en az 2 slayt gerekir.
  • Yalnızca type=slides değerine sahip bantlara uygulanır.
Bir değerle mevcutsa:
  • loopözelliği önceden mevcut değilse loop özelliğini amp-carousel öğesine ekler.
  • Gerekli sayıda döngü yapıldıktan sonra loop özelliğini kaldırır.
delay (isteğe bağlı) autoplay etkinleştirildiğinde sonraki slayda ilerlemenin geciktirileceği süreyi (milisaniye cinsinden) belirtir. delay özelliği yalnızca type=slides değerine sahip bantlar için geçerlidir.
loop (isteğe bağlı) Kullanıcının, ilk öğeyi veya son öğeyi geçmesine olanak tanır. Döngünün gerçekleşmesi için en az 3 slayt olmalıdır. loop özelliği yalnızca type=slides değerine sahip bantlar için geçerlidir. Örnek: Kontroller, döngü oluşturma ve gecikmeli otomatik oynatmayı içeren bir slayt bandı görüntüler
wzxhzdk:2
Open this snippet in playground
common attributes Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.
  • amp-carousel öğe seçicisini serbest bir şekilde biçimlendirmek için kullanabilirsiniz.
  • Bant öğelerini hedeflemek için .amp-carousel-slide sınıf seçicisini kullanabilirsiniz.
  • Bir amp-carousel düğmesi devre dışı bırakıldığında görsel olarak gizlenir.
  • Varsayılan olarak .amp-carousel-button, düğmelerin arka plan resmi olarak satır içi SVG kullanır. Aşağıdaki örnekte olduğu gibi bunu kendi SVG'niz veya resminizle geçersiz kılabilirsiniz.

Örnek: Varsayılan .amp-carousel-button satır içi SVG'si

.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>');
}

Örnek: Varsayılan .amp-carousel-button satır içi SVG'sini geçersiz kılma

.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>');
}

Doğrulama

AMP doğrulayıcı spesifikasyonunda amp-carousel kurallarına bakın.

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