Dodawanie karuzel
Kolejną wspólną cechą stron mobilnych jest karuzela. Karuzele można z łatwością dodawać do stron AMP za pomocą składnika amp-carousel. Zacznijmy od prostego przykładu, takiego jak karuzela obrazów.
Prosta karuzela obrazów
Pamiętaj o dodaniu biblioteki składnika amp-carousel poprzez umieszczenie następującego żądania JavaScript w sekcji <head> dokumentu:
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
Następnie osadzimy prostą karuzelę obrazów z układem responsywnym oraz predefiniowaną szerokością i wysokością. Dodaj do strony następujący kod:
<amp-carousel layout="fixed-height" height="168" type="carousel">
<amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
<amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>
Odśwież stronę, aby zobaczyć karuzelę:
Składnik amp-carousel można skonfigurować na różne sposoby. Zmieńmy UI, aby wyświetlać tylko jeden obraz naraz i ustawmy resposywny układ karuzeli.
W tym celu najpierw zmień atrybut type składnika amp-carousel z carousel na slides, zmień atrybut layout na responsive i ustaw atrybut width na 300 (zdefiniuj zarówno atrybut height, jak i width). Dodaj atrybut "layout=responsive" do elementów podrzędnych amp-img elementu amp-carousel.
Załaduj ponownie stronę. Teraz, zamiast listy przewijanej elementów, zobaczysz jeden element naraz. Spróbuj przesuwać karuzelę w poziomie, aby zmieniać elementy. Gdy przejdziesz do trzeciego elementu, nie będziesz w stanie przesunąć karuzeli dalej.
Następnie dodaj atrybut loop. Odśwież stronę i od razu spróbuj przesunąć karuzelę w lewo. Karuzela będzie działać w nieskończonej pętli.
Na koniec ustawimy automatyczne odtwarzanie karuzeli w tempie co 2 sekundy. Dodaj atrybut autoplay i atrybut delay z wartością 2000 (delay="2000") do elementu amp-carousel.
Końcowy wynik powinien wyglądać tak:
<amp-carousel
layout="responsive"
width="300"
height="168"
type="slides"
autoplay
delay="2000"
loop
>
<amp-img
src="mountains-1.jpg"
width="300"
height="168"
layout="responsive"
></amp-img>
<amp-img
src="mountains-2.jpg"
width="300"
height="168"
layout="responsive"
></amp-img>
<amp-img
src="mountains-3.jpg"
width="300"
height="168"
layout="responsive"
></amp-img>
</amp-carousel>
Odśwież stronę i sprawdź jak działa!
amp-carousel miał typ carousel, użyliśmy typu układu fixed-height. Obsługiwane typy układu dla typu carousel są ograniczone; na przykład typ carousel nie obsługuje układu responsive. Jak sama nazwa wskazuje, elementy o stałej wysokości zajmują dostępne im miejsce, ale nie zmieniają wysokości. W przypadku elementów o stałej wysokości należy zdefiniować atrybut height, a atrybut width powinien mieć wartość auto albo nieustawioną. Mieszana zawartość karuzeli
Karuzele obrazów są świetne, ale co jeśli chcemy, aby w naszej karuzeli pojawiły się bardziej złożone treści? Spróbujmy trochę pomieszać, umieszczając w jednej karuzeli reklamę, tekst i obraz. Czy składnik amp-carousel naprawdę może obsłużyć taką mieszankę naraz? Oczywiście!
Najpierw dodajmy ten styl do elementu <style amp-custom>, aby zapewnić bezproblemową współpracę składników amp-fit-text i amp-carousel:
amp-fit-text {
white-space: normal;
}
A teraz, zastąp swoją prostą karuzelę tym:
<amp-carousel layout="fixed-height" height="250" type="carousel">
<amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>
<amp-ad
width="300"
height="250"
type="doubleclick"
data-slot="/35096353/amptesting/image/static"
>
<div placeholder>This ad is still loading.</div>
</amp-ad>
<amp-fit-text width="300" height="250" layout="fixed">
Big, bold article quote goes here.
</amp-fit-text>
</amp-carousel>
Odśwież stronę, aby zobaczyć coś w tym rodzaju:
Aby dowiedzieć się więcej, zapoznaj się z dokumentacją referencyjną składnika amp-carousel.
amp-ad zawierał element podrzędny div z atrybutem placeholder. Wcześniej w samouczku napotkaliśmy podobny scenariusz ze składnikiem amp-ad używającym atrybutu fallback. Czym się różnią placeholder i fallback? Elementy fallback są wyświetlane, gdy nie uda się załadować elementu nadrzędnego, np. gdy nie było dostępnej reklamy. Elementy placeholder są wyświetlane zamiast elementu nadrzędnego podczas jego ładowania. W pewnym sensie te elementy rozgraniczają proces ładowania elementu nadrzędnego. Więcej informacji zawiera przewodnik Elementy zastępcze i zasoby rezerwowe.