Title: implementing amp-carousel
Last modified: October 17, 2019

---

# implementing amp-carousel

 *  Resolved [craigstanfield](https://wordpress.org/support/users/craigstanfield/)
 * (@craigstanfield)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/implementing-amp-carousel/)
 * Hi Support,
 * I’m having an odd issue with trying to replace a slick slider with an amp-carousel.
   The template is called the html is echoed but when the final page is rendered
   amp appears to have stripped out the html. I copied the html from within the 
   template and pasted it into where it should be on the page and it appears to 
   work (well formatting is some way off but probably missing the css for it) if
   you look at the non amp version of the page i linked above it will show the slider
   just above the footer. So here’s what i have code wise. First in functions i 
   added a test for amp
 *     ```
       function example_is_amp() {
           return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
       }
       ```
   
 * I then added a test for amp and enqueued the amp-carousel script
 *     ```
           if (example_is_amp()) {
               wp_enqueue_style( 'style-css', $styleSheetDir . '/amp-style.css', false, '');
               wp_enqueue_script('amp-carousel', 'https://cdn.ampproject.org/v0/amp-carousel-0.2.js', '', '', false);
           } else {
               //animate.css
               wp_enqueue_style('animate', $styleSheetDir . '/css/animate.css', '', '');
               wp_enqueue_style('style-css', $styleSheetDir . '/style.css', false, '');
           }
       ```
   
 * so far so good and the amp-carousel script is loaded when we have an amp page.
 * I then modified the template which renders the slick slider again using the is_amp_example()
   conditional the code builds a $html string and on completion it echoes it. for
   simplicity I’ll show the rendered content in $html when it is echoed. This is
   as follows:
 *     ```
       	<div class="latest__slider small-12 large-centered columns">
       		<div class="slider__heading hide-for-medium-down large-3 columns">
       			<h2>Our Work</h2>
       			<ul class="slider__nav latest-projects-slider">
       						<li class="slider__nav__number"><span>01</span></li>
       						<li class="slider__nav__number"><span>02</span></li>
       						<li class="slider__nav__number"><span>03</span></li>
       						<li class="slider__nav__number"><span>04</span></li>
       						<li class="slider__nav__number"><span>05</span></li>
       						<li class="slider__nav__number"><span>06</span></li>
       			</ul>
       		</div>
       	</div>
       	<div class="slider__slides small-12 large-9 columns">
       		<h2 class="show-for-medium-down text-center">Our Work</h2>
       		<div class="portfolio__slider__wrapper">
       			<div class="portfolio__slider__track latest-projects-slider">
       				<amp-carousel width="235" height="134" layout="responsive" type="slides" controls>
       						<amp-img src="https://www.urbanlandscapedesign.co.uk/wp-content/uploads/2016/08/fed-care-home-slider-1.jpg" alt="Heathlands Care Home" width="214" height="120" alt="<p>Directly with the client, we constructed and installed a beach themed garden, suitable for Dementia patients</p>"></amp-img>
       						<amp-img src="https://www.urbanlandscapedesign.co.uk/wp-content/uploads/2017/03/large-private-garden-slider.jpg" alt="Large Private Garden" width="214" height="120" alt="<p>We have been working with this client for a number of years on various projects within this garden including outdoor kitchen, hot tub, Victorian kitchen garden and woodland area</p>"></amp-img>
       						<amp-img src="htts://www.urbanlandscapedesign.co.uk/wp-content/uploads/2017/03/hewitt-chester.jpg" alt="Contemporary Garden Chester" width="214" height="120" alt="<p>A cool contemporary project on a new build property in Chester.</p>"></amp-img>
       						<amp-img src="https://www.urbanlandscapedesign.co.uk/wp-content/uploads/2016/08/hoole.jpg" alt="Contemporary Courtyard Chester" width="214" height="120" alt="<p>In this small courtyard development in Hoole, we created a cool split level space for the client who wanted a modern feel.</p>"></amp-img>
       						<amp-img src="https://www.urbanlandscapedesign.co.uk/wp-content/uploads/2017/03/outdoor-kitchen-urban-office-slider.jpg" alt="Urban Landscapes HQ" width="214" height="120" alt=""></amp-img>
       						<amp-img src="https://www.urbanlandscapedesign.co.uk/wp-content/uploads/2017/03/outdoor-living-slider.jpg" alt="Urban RHS Tatton" width="214" height="120" alt=""></amp-img>
       				</amp-carousel>
       			</div>
       		</div>
       	</div>
       ```
   
 * If this is pasted into the rendered page (within the <div class=”latest__background”
   > div) the carousel appears and works (although styling is messed up and in a
   tablet/desktop it should show more than one image (as can be seen on the non 
   amp page) I’ll fix styles etc once the underlying concept is working.
 * So why is the html being removed from the rendered page. I use exactly the same
   template and process to get the content (ie build the html string and echo it)
   but content is not removed on non amp page?
 * Is there a way i can make this work? is there a direct way to swap for slick-
   slide or is amp-carousel the best/only option? from what i see it should cover
   our usage case(s)
 * I’ve tried using img instead of amp-img and with and without responsive=”responsive”.
   I also tried the version 0.2 of amp-carousel but again no content.
 * At a loss with it now.
 * thanks
 * Craig
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fimplementing-amp-carousel%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [craigstanfield](https://wordpress.org/support/users/craigstanfield/)
 * (@craigstanfield)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/implementing-amp-carousel/#post-12039855)
 * Turned out i was echoing $_html not $html. fixed and now it is working!
 *  [James Osborne](https://wordpress.org/support/users/jamesosborne/)
 * (@jamesosborne)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/implementing-amp-carousel/#post-12040178)
 * [@craigstanfield](https://wordpress.org/support/users/craigstanfield/) Nice work.
   For the first part of your code you don’t need to enqueue the `amp-carousel` 
   script, once the plugin identifies any <amp-carousel> tag it will request the
   script on any relevant AMP URL.
 * The native WordPress gallery block also works great as a carousel. With the AMP
   plugin there are [additional options](https://i.imgur.com/RMHacjT.png) which 
   can be used.
 *  Plugin Author [Weston Ruter](https://wordpress.org/support/users/westonruter/)
 * (@westonruter)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/implementing-amp-carousel/#post-12040773)
 * It’s still a good idea to enqueue `amp-carousel` in case the block gets rendered
   on a non-AMP page. This was done recently for the Carousel block in Newspack:
   [https://github.com/Automattic/newspack-blocks/tree/master/src/blocks/carousel](https://github.com/Automattic/newspack-blocks/tree/master/src/blocks/carousel)
 * See [https://github.com/Automattic/newspack-blocks/blob/70adb0186055d4c9ed5dc30050f9fb77562fa275/src/blocks/carousel/view.php#L16-L48](https://github.com/Automattic/newspack-blocks/blob/70adb0186055d4c9ed5dc30050f9fb77562fa275/src/blocks/carousel/view.php#L16-L48)
 * It doesn’t hurt to enqueue the scripts, but just please re-use the scripts registered
   by the AMP plugin (if it is active) instead of registering them yourself (if 
   they already are registered).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘implementing amp-carousel’ is closed to new replies.

 * ![](https://ps.w.org/amp/assets/icon.svg?rev=2527602)
 * [AMP](https://wordpress.org/plugins/amp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/amp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/amp/)
 * [Active Topics](https://wordpress.org/support/plugin/amp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/amp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/amp/reviews/)

## Tags

 * [amp-carousel](https://wordpress.org/support/topic-tag/amp-carousel/)
 * [html](https://wordpress.org/support/topic-tag/html/)

 * 3 replies
 * 3 participants
 * Last reply from: [Weston Ruter](https://wordpress.org/support/users/westonruter/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/implementing-amp-carousel/#post-12040773)
 * Status: resolved