amp-carousel

0.2 0.1

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

Un carosello generico per mostrare più contenuti simili lungo un asse orizzontale, progettato per un'ottima flessibilità e prestazioni.

Comportamento

Ciascuno degli elementi secondari immediati del componente amp-carousel viene considerato un elemento del carosello. Ognuno di questi nodi può avere anche elementi secondari HTML arbitrari.

Il carosello è composto da un numero arbitrario di elementi e da frecce di navigazione per avanzare o tornare indietro di un singolo elemento.

Il carosello passa da un elemento all'altro se l'utente scorre, utilizza le frecce di navigazione o fa clic su una freccia di navigazione facoltativa.

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

Passare a una diapositiva specifica

Se imposti un metodo per l'attributo on di un elemento su tap:carousel-id.goToSlide(index=N), al tocco o clic dell'utente il carosello con l'ID "carousel-id" avanzerà a index=N, dove la prima diapositiva si trova a index=0, la seconda a index=1 e così via.

Nel seguente esempio, viene mostrato un carosello di tre immagini con in basso dei pulsanti di anteprima. Quando un utente fa clic su uno dei pulsanti, viene visualizzato l'elemento del carosello corrispondente.

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

Attributi

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

Stili

• Puoi utilizzare il selettore di elementi amp-carousel per modificare lo stile del carosello.
• Puoi utilizzare il selettore di classi .amp-carousel-slide per concentrarti su elementi specifici del carosello.
• Lo stato visivo di un pulsante amp-carousel quando è disattivato è nascosto.
• Per impostazione predefinita, .amp-carousel-button utilizza un SVG incorporato come immagine di sfondo dei pulsanti. Puoi sostituire questa impostazione con il tuo SVG o immagine, come nell'esempio riportato di seguito.

Esempio: SVG incorporato .amp-carousel-button predefinito

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

Esempio: sostituzione dell'SVG incorporato .amp-carousel-button predefinito

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

Convalida

Consulta le regole amp-carousel nella specifica dello strumento di convalida AMP.