BootAMP by

Carousel

To use Carousel the following "amp-carousel" extension must be included.

Carousel with previous and next controls


<amp-carousel width="1280" height="853" layout="responsive" type="slides" class="mb4" autoplay delay="4000" >
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45074.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45074"></amp-img>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45068.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45068"></amp-img>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45076.jpg" width="1280" height="853" layout="responsive" alt="Beautiful Image of a nasa-45076"></amp-img>
  </figure>
</amp-carousel>
                

With captions

Add captions to your slides easily with the <figcaption> Tag within any <amp-carousel> Tag.

Slide 1

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by L. Fischer

Slide 2

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by Mali D.

Slide 3

Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.

Taken by J.T. Lee

<amp-carousel width="1280" height="853" layout="responsive" type="slides" class="mb4" autoplay delay="4000">
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45076.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 1</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">L. Fischer</a>
      </span>
    </figcaption>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45074.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 2</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">Mali D.</a>
      </span>
    </figcaption>
  </figure>
  <figure class="ampstart-image-with-heading  m0 relative mb4">
    <amp-img src="img/bootstrap-amp/nasa-45068.jpg" width="1280" height="853" layout="responsive"
      alt="Beautiful Image of a nasa"></amp-img>
    <figcaption class="absolute right-0 bottom-0 left-0 center text-white">
      <header class="ampstart-image-heading px2 py2 line-height-4">
        <h3 class="h1">Slide 3</h3>
      </header>
      <p class="xs-hide">
      Duis nec dolor et quam vulputate sagittis. Nam arcu ex, suscipit nec cursus a, volutpat sit amet felis.
      </p>
      <span class="ampstart-image-credit block bold">
       Taken by
        <a href="#" role="author">J.T. Lee</a>
      </span>
    </figcaption>
  </figure>
</amp-carousel>