Learning AMP: Creating AMP Carousel with Dots Controls

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Full code of AMP Carousel with dots

<?php $slides = get_field('gallery'); 
if( have_rows('gallery') ): ?>
<amp-carousel
id="carouselID"
layout="fill"
type="slides"
on="slideChange:
selectorID.toggle(index=event.index, value=true),
carouselDots.goToSlide(index=event.index)">
<?php while ( have_rows('gallery') ) : the_row(); ?>
<div class="slide-container">
<?php $image = get_sub_field('background');
$image_small = wp_get_attachment_image_src( $image, "thumbnail" );
$image_medium = wp_get_attachment_image_src( $image, "medium" );
$image_large = wp_get_attachment_image_src( $image, "large" );
$image_full = wp_get_attachment_image_src( $image, "full" );
$alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>
<amp-img class="cover"
src="<?php echo $image_small[0]; ?>"
srcset="<?php echo $image_medium[0]; ?> 700w,
<?php echo $image_large[0]; ?> 1024w,
<?php echo $image_full[0]; ?> 1440w"
alt="<?php echo $alt;?>"
layout="fill">
</amp-img> </div>
<?php endwhile; ?>
</amp-carousel>
<div class="dots-container">
<amp-selector id="selectorID"
on="select:carouselID.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<?php $i=0; ?>
<?php while ( have_rows('gallery') ) :
the_row(); ?>
<li option="<?php echo $i++; ?>"></li>
<?php endwhile; ?>
</ul>
</amp-selector>
</div>
<?php endif; ?>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script> 
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

Explanation

AMP-Carousel

<amp-carousel 
id="carouselID"
layout="fill"
type="slides"
on="slideChange: SelectorID.toggle(index=event.index, value=true), carouselDots.goToSlide(index=event.index)">
<amp-img src="/img/image1.jpg" layout="fill" alt="apples">
</amp-img> <amp-img src="/img/image2.jpg" layout="fill" alt="lemons">
</amp-img> <amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img>
</amp-carousel>

AMP-Selector

<amp-selector 
id="selectorID"
on="select:carouselID.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<li option="0" selected>Option A</li>
<li option="1">Option B</li>
<li option="2">Option C</li>
<li option="3">Option D</li>
</ul>
</amp-selector>
<amp-carousel 
id="carouselID"
layout="fill"
type="slides"
on="slideChange: SelectorID.toggle(index=event.index, value=true), carouselDots.goToSlide(index=event.index)">
<amp-img src="/img/image1.jpg" layout="fill" alt="apples"></amp-img>
<amp-img src="/img/image2.jpg" layout="fill" alt="lemons"></amp-img>
<amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img>
</amp-carousel>
<amp-selector
id="selectorID"
on="select:carouselID.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<li option="0" selected>Option A</li>
<li option="1">Option B</li>
<li option="2">Option C</li>
<li option="3">Option D</li>
</ul>
</amp-selector>

Making AMP-Selector work on WordPress

<amp-selector 
id="selectorID"
on="select:carouselID.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<?php while ( have_rows('gallery') ) : the_row(); ?>
<li option=""></li>
<?php endwhile; ?>
</ul>
</amp-selector>
<amp-selector 
id="selectorID"
on="select:carouselID.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<?php $i=0; ?>
<?php while ( have_rows('gallery') ) : the_row(); ?>
<li option="<?php echo $i++; ?>"></li>
<?php endwhile; ?>
</ul>
</amp-selector>

Styling AMP-selector with CSS

.dots-container { 
position:absolute;
bottom:25vh;
width:100%;
z-index:110;
}
.dots {
text-align: center;
}
.dots li {
width:13px;
height:13px;
margin:13px;
border-radius:10px;
border:1px solid rgba(0,0,0,0.3);
background:rgba(255,255,255,0.5);
display:inline-block;
}
.dots li[option][selected] {
outline:0px solid rgba(0,0,0,0.7);
border:1px solid #1da838;
background:#1da838;
}
Image for post
Image for post
AMP Carousel with Dots navigation example, via safari.lt

Useful links:

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store