AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

amp-carousel

Description

Yatay eksen boyunca birden çok benzer içerik parçası görüntüler.

 

Required Scripts

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

Supported Layouts

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>
Bu kod parçacığını playground'ta aç

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>
Bu kod parçacığını playground'ta aç

Özellikler

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 
<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>
Bu kod parçacığını playground'ta aç
common attributes Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.

Stil

  • 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.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git