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 to see the link]