AMP CAROUSEL

The amp-carousel is same like other components like owl-carousel, bootstrap-carousel etc., which allow to display content along with slider pieces.
To implement carousel in amp web page we need to import carousel component in the amp webpage header i.e.,

Basic line of code to create simple amp-carousel:  

Attributes we can use in AMP-carousel:

1. TYPE

We can use two different types of attribute to show carousel in different way:

• Use type="carousel" to display a list of items as a continuous strip.
  i.e., <amp-carousel height="300" layout="fixed-height" type="carousel">
• Use type="slides" to display a list of items as slides. i.e.,
  <amp-carousel height="300" layout="fixed-height" type="slider">

2. HEIGHT (required)

• Height specifies the height of the amp-carousel, which consider in pixels. i.e.,
  Ex 1: <amp-carousel height="350" >
  

Ex 2: <amp-carousel height="550" >

3. CONTROL (optional)

• Control attribute can be use to permanantly display of left and right arrows controller. Although left and right controllers in amp-carousel are by defaults permanantly visible in desktop/laptop view but in mobile devices left/right control buttons get disappear after view seconds. To make them permanantly visible you can use controls attribute in <amp-carousel> tag. i.e., <amp-carousel type="carousel">

4. AUTOPLAY (optional)

• autoplay attribute allows the carousel to the next slide item without interaction. By default autoplay attribute consider 5 seconds of intervals for each item content. But it can be overidden by the "delay" attribute in amp-carousel.

5. LOOP (optional)

• loop attribute allow carousel to rotate the content/items in a looping manner. So that carousel will consider first slider item again after nth item of the carousel.There should be atleast 3 slider for looping in a carousel.

Buttons/Controllers
By default,.amp-carousel-button utilises an inlined SVG as the buttons' background image.

.amp-carousel-button-prev {  left: 16px;  background-image: url('data:image/svg+xml;charset=utf-8,'); } .amp-carousel-button-next {  right: 16px;  background-image: url('data:image/svg+xml;charset=utf-8,'); }

How to maintain more than one item in a single slide?

Although amp-carousel always avail only a single item/image in a single slide at a time but using some basic generic HTML trick you can maintain more than 1 item/image at a time in a single slide

For EX:

You can put different items/images in a single <div> tag

Group Health

Workmen Compensation

Fire

By using this simple trick you can maintain more than one item in a single slide for amp-carousel easily.

--------------------------------------------------------------------------------------------------------------------------------------------------