AMP Carousel, amp-carousel advanced examples and tricks

Image Sliders and Galleries with amp-carousel

Aiming for the reader's attention we try to compose the very best content in our powers and of course – what is the plain text if it's not accompanied by some powerful and appealing images to improve our pages by adding some color and visual perspective to what we have to share with the world. After all – an image is worth a thousand words. On the other hand – pretty much half of the visits the world pays to the Internet are not done through the mobile devices and, of course, with more or less limited screen dimensions, along with a great design and appealing text and images we also need an efficiency. The first thing to do – of course – optimize the server and pages with AMP Video appropriately so they could perform as good as possible on both desktops and mobiles. So, we do an optimizing which is a useful thing to do and eventually – keep track of what the Internet search engine will say about our work, hoping for a better rating what also means a higher place in the search list.

Not so long ago this would be quite enough, however, today there is this thing called Accelerated Mobile Pages – a project backed up by Google itself claiming to be providing much faster loading and therefore – much more user satisfaction by chopping off the markup we got used to and making our code obey to a set of strict rules in order to have it validated as AMP. The benefit from this is that the pages having AMP mirrors do get highly rated and eventually – even pushed up in the results list.

Over here we're going to take a look at the means the AMP provides for including our appealing imagery content wrapping it up in a carousel or slider in order to spice up our text and still have our pages validated.

Let us learn more regarding AMP-carousel element

The way we achieving a wrapping content is a usage of the so-called amp-carousel element – a custom AMP specific tag that helps the images in the amp carousel to be properly handled.

What it generally does is taking each of its direct children as amp carousel item and displaying them in a few predefined ways while each of them, in turn, is allowed having some valid HTML content wrapped inside. Navigation through all the amp carousel items takes place by moving them over the horizontal axis by either swiping or clicking/ tapping on the navigational controls which the amp-carousel is capable of displaying if defined.

In AMP all the possible components are separated to AMP core and additional components which get included in page's <head> only when needed. As one of the additional components amp-carousel needs the following line in order to work out later on:

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

The amp-carousel can display in a few ways according to the value which you assigned to its type attribute. Allowed values are carousel (which is the default value) causing all the images to be shown and scrolled aside and slides which causes displaying a single slide at a time. Interesting thing to note here is while carousel supports only fixed-height, fixed and nodisplay values for the custom AMP layout attribute carousel also supports responsive, flex-item and fill

Each amp-carousel should have height attribute explicitly provided with a value in pixels. Optionally there also could be controls showing up the navigation arrows and data-next (or previous )-button-aria-label labeling them as well as auto play attribute firing up the carousel to rotate its items without an user interaction. The auto play default interval between switching slides is 5s (or 5000ms) and can be applied only to elements having type set to slides

When it comes to adding a bit of a personal touch with a few lines in the inline style tag – for custom styling allowed in AMP, developers recommend using the following selectors:

amp-carousel which of course will select all of the amp slider elements on the page with AMP Image – supposed that they either imagine having a single element of this kind (that's not explicitly provided as a restriction rule yet ) or maybe – consistent styling.

Anyway – if you do have more than one slider/ carousel on an AMP page and want to style them differently you might want to consider adding an id attribute to them so they get easily selected. This goes for the rest of the selectors mentioned below. The class unique for the carousel slides is .carousel-slide and the selector for the buttons comes to be .amp-carousel-button

An interesting thing to note here is that the buttons are using an inlined SVG image for their background so maybe the one you use for replacing it should be composed and placed pretty much the same way or there might be some unexpected surprises once it comes to the page of the validation.

Expanded tips about AMP Carousel (all helpful web links located at the end of this guide).

AMP Slider Procedures

Each of the amp-carousel element's actual children is taken into account as an item inside the carousel. Each and every of these nodes may also come with arbitrary HTML children.

The slide carousel includes an arbitrary number of objects, alongside optional navigating pointers to go ahead or else backwards a single element. The carousel advances between materials in case the site visitor swipes use arrow keys or hits an alternative navigation arrow.

<amp-carousel width="450"
  height="300">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

Moving up to a particular slide with amp carousel dots

Applying a solution for the on feature for an element to tap: carousel-id. goToSlide(index=N) will, on customer touch or else click, proceed a slide carousel together with the "carousel-id" ID to the slide at index=N (the very first slide goes to index=0, the 2nd slide is at index=1, and so forth).

Within the following example, we have an amp slider of three images with preview switches beneath the carousel. Whenever an individual selects one of the buttons, the corresponding slide carousel thing exhibits.

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="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="images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>

AMP carousel Features

type

Determines the display screen type for the slide carousel products, which can be:

- carousel (default): All of the slides are presented and are certainly scrollable horizontally. This specific option sustains simply just the coming after formats: fixed, fixed-height, as well as nodisplay.

- slides: Reveals a separated slide at once. This specific type sustains the nexting layouts: fill, fixed, fixed-height, flex-item, nodisplay, and also responsive.

AMP carousel height ( demanded)

Defines the height of the carousel, in pixels.

AMP carousel controls ( an option)

Reveals left and right arrows for the user to get through slide carousel objects on mobile phones. The visibility of pointers can surely additionally be handled via styling, and also a media query have the ability to be applied to simply just show cursors at particular screen sizes. On the desktop, pointers are really always shown except when basically only a particular child is there.

data-next-button-aria-label (optional)

Sets the aria-label for the amp-carousel-button-next. Supposing that absolutely no value is really delivered, the aria-label defaults to 'Next element inside of carousel'.

data-prev-button-aria-label ( alternative)

Positioning the aria-label for the amp-carousel-button-prev. In case absolutely no value is really supplied, the aria-label defaults to ' Past item of slider'.

AMP carousel autoplay ( an option)

Accelerate the slide to the following slide without having individual interaction and communication.

Assuming that there:

- By default, advances a slide in 5000 millisecond intervals (5 secs); this can surely be cancelled due to the delay property.

- Attaches the loop characteristic to amp-carousel in the event that loop is definitely not already available.

- Calls for about 3 slides in order to get autoplay to go on.

- Applies basically only to carousels using type=slides.

AMP carousel delay ( optionally available)

Identifies the entire time (in milliseconds) to delay progressing to the following slide while autoplay is certainly enabled. The delay property is normally just useful to slide carousels along with type= slides.

loop ( an option)

Lets the site visitor to proceed past the very first item or else the finishing object. There have to be certainly at very least 3 slides for looping to happen. The loop attribute is only useful to carousels together with type= slides.

Sample: Presents a slides carousel utilizing managements, looping, and postponed autoplay

<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="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

regular properties

This particular component utilizes common attributes prolonged to AMP elements.

Designing AMP slider

- You may utilize the amp-carousel feature selector to style it readily.

- You can operate the . amp-carousel-slide class selector to aim at carousel objects.

- The visional condition of an amp-carousel switch when it is actually turned off is hidden.

- By default, . amp-carousel-button works with an inlined SVG as the background-image of the switches. You may override this having your personal SVG or else illustration such as in the scenario below.

Some example: Default .amp-carousel-button inlined SVG

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

Some example: Bypassing the default .amp-carousel-button inlined SVG

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

Verification

Check out amp-carousel regulation in the AMP validator specs.

AMP carousel conclusions

Pretty much that's how an image slider can be included and set up in an accelerated Mobile page. It does not show off with some fancy transitions or a great flexibility of any kind but at least gives us a way including some images and movement in the AMP pages we create. Here is a thing – it turns out the trends over the past year are working for the AMP since as it looks like it's not that fancy having a carousel as the first element of your pages anymore.

So, why including a few images when you can place a single one (wrapped inside the AMP-specific tag amp-image of course) Anyway – this is a project and vision specific decision each one of us have to take for ourselves but if you decide to have an amp-carousel - at least now you have a point to start from.

Check a few video information relating to AMP-carousel:

Linked topics:

AMP-carousel authoritative documents

Take a look at a number of examples of AMP-carousel

Yet another helpful overview about AMP-carousel by GitHub

CSS Bootstrap 4 Carousel with Options

jQuery Bootstrap Image Carousel with Options

Bootstrap Image Carousel Slider

HTML Bootstrap Carousel with Autoplay

CSS Bootstrap Carousel with Options

HTML Bootstrap Image Carousel Slider

jQuery Bootstrap Carousel with Options

jQuery Bootstrap 4 Carousel with Swipe

jQuery Bootstrap Carousel Example

Best Free AI Website Builder

Generate AI websites with a simple prompt! Type in any language, export in zip.


AI Website Builder



Best Free Website Builder Software

Create awesome websites offline! No coding. 9900+ templates. Edit and save locally, upload wherever.


Free website builder download for Win, Mac, Linux!



Latest Posts

  1. Best Website Builder AIBest Free AI Website Builder - Create Website with AI
  2. Best Website Builder for Interior Designs, Digital Marketing Agencies, Travel Agencies
  3. Best Website Builder for Churches, Authors, Consultants, Magazines
  4. Website Builder for Education, Software Companies, Designers, Videos
  5. Website Builder for Beginners, Bloggers, Writers, IT Companies
  6. Website Builder for Online Stores, Restaurants, Musicians, Real Estate
  7. Podcasts and affiliate marketing Website Builder
  8. Best Website Builder For therapists and nonprofits
  9. Website Builder For SEO and portfolio
  10. Best Website Builder For Kids & Musicians
  11. Photographer & Artist Website Builder
  12. HTML Code Generator - HTML Code Generator
  13. Web Design Tool - Web Design Program
  14. Landing Page Maker - Landing Page Generator
  15. Easiest Website Builder For Beginners - No Coding Website Builder
  16. Fantastic HTML Constructor with Drag and Drop or Full Code Editor
  17. Eye-catching HTML Generator You Should Try
  18. Best QR Code Generator Free
  19. Top 11 Wix App Alternative Website Builders
  20. Top 11 Free Wordpress Alternatives Services
  21. Instagram Feed Embed
  22. Really Convenient Business Website Builder Overview
  23. AMP format overview
  24. amp-live-list AMP Blog component
  25. AMP Layout & Media queries
  26. Image galleries and AMP
  27. AMP Font
  28. Using AMP with Bootstrap
  29. AMP SEO
  30. AMP and Wordpress
  31. Facebook Instant Articles vs. Google AMP
  32. AMP Form - amp-form extended examples and tricks
  33. AMP Analytics
  34. AMP AD
  35. AMP HTML Advanced Examples, Codes, Tags
  36. AMP IFrame - amp-iframe examples and tricks
  37. AMP Validator - Test AMP pages
  38. What is AMP? - Overview