AMP Google Maps Integration Example to Wordpress via AMP-Iframe

Creating AMP Carousel with Dots Navigation

, ,

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

What Will I Learn?

This tutorial demonstrates how to add dots navigation to amp-carouselvia amp-selector. I assume that you already have coded AMP carousel thus I will not explain how to do it in this tutorial. In case you don’t have amp-carousel coded yet, follow this link to make one.

Requirements:

Useful links:

Full code of AMP Carousel with dots

This code example is of AMP Carousel with dots navigation populated by ACF repeater field on WordPress. If you are interested in the solution itself just follow the tutorial and I’m sure I will break this down for you so you could make it work with any other gallery. Or in case it won’t you know you can contact me? 😉

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.
<?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; ?>

If you don’t have AMP for WordPress plugin you’ll have to insert amp-carousel and amp-selector manually.

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

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Explanation

To achieve fully working AMP compatible image carousel with dots navigation we basically need to fuse amp-carousel with amp-selector. Since I work with WordPress I will explain how to dynamically populate the carousel with ACF. Follow the links below if you want to skip any parts of this tutorial.

AMP-Carousel

AMP-Selector

Making AMP-Selector work on WordPress

Styling AMP-selector with CSS

The code of a typical amp-carousel doesn’t change much, in order for it to work with amp-selector, the only hing you need to do is to add on="slideChange:" event:

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

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

AMP-Selector

Since currently I cannot find a basic example of amp-selector for amp-carousel, provided by official amp.dev, I created this one:

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

The mechanics for a static carousel with dots navigation are pretty straight forward – for each carousel slide you need a separate list item which we will format with CSS to appear like a dot a bit later. Just don’t forget to add selected to the first list item so it would appear active as soon as the website loads.

One last thing before the whole core is set in place – we have to make sure amp-selector is connected with amp-carousel by the correct IDs. In this tutorial I use carouselID for amp-carousel, selectorID for amp-selector and carouselDots for dots parent element. The whole code without any sight of WordPress would be:

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.
<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>

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Making AMP-Selector work on WordPress

As I’ve already mentioned, I won’t talk of making amp-carousel work on WordPress in this tutorial, if you still need to do so, please, check this article. What we will focus on in this section is making amp-selector work with WordPress. As you can see in order for dots navigation to work correctly it needs an exact same numbers of list items within carouselDots element. To make sure it is always the same all we have to do is to use the same loop as we use to populate amp-carousel.

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

Notice that I only use while() : the_row(); since I haven’t closed if(); statement after closing my amp-carousel. The only problem left is that the code above will output list items without option values thus amp-selector won’t be able to assign each dot for a correct carousel slide. This could be fixed by simply adding $i counter to the loop as it is shown in example below:

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

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Styling AMP-selector with CSS

And that should be it, the only thing is left is to style your carousel and dots navigation the way you want. The code I use as it shown in the example is:

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

The code is fully tested and if you want a working AMP carousel example you can check it on one of my clients’ website safari.lt. If it is still not working for you, please, let me know on the comments section below or contact me via e-mail.

AMP Carousel with Dots navigation example, via safari.lt

Originally posted on 9/16/2019
Versions:
WordPress 5.2.3
AMP 1.2.2

Share.
the.Word

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.