Hy Folks, Today we will learn how to add an amp carousel to your AMP Pages. It is the awesome features of AMP without any include external javascript library. You already know AMP is a Google product and very lightweight and better for the performance of the website that's why lots of companies using these features. because it can make an awesome User Interface and make a better user experience.
So let's Create the AMP carousel
Note- Please do follow All the Steps
Before Creating the amp-carousel I want to tell you we have some different-2 functionality of amp-carousel which is that:
1- Simple carousel -
In this carousel, you will see two or more images for the first time means when you will reload the page you will see two images at a time. Inside the amp-carousel, you have to add an image using the <amp-img> tag.
Watch the video Click here.
These have some attribute which is must for the creating amp-carousel
- type: which has value carousel
- layout: which has to value fixed-height
- height: you can give height according to your requirement.
- width: This is optional. if you want to add just set the value auto.
Now we can have a look at the Simple carousel. You can copy the below code and paste it inside the section where you want to show the amp-carousel.
<amp-carousel layout="fixed-height" height="100" width="auto" type="carousel">
<amp-img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW5zfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img src="https://images.unsplash.com/photo-1541800569-95a8b25835f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img src="https://static.toiimg.com/photo/64560386.cms" width="150" height="200"></amp-img>
</amp-carousel>
Download Source Code - ЁЯСЗ
2- Show one image at One time -
In this Carousel, you have to add some attributes in the carousel tag and add layout attribute in the <amp-img> tag also.
These have some attribute which is must for the creating amp-carousel.
- layout: which has to value responsive
- type: which has value slides
- height: you can give height according to your requirement.
- width: you can give width according to your requirement.
After adding these attribute your carousel should look like this ЁЯСЗ
<amp-carousel layout="responsive" height="100" width="150" type="slides">
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW5zfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1541800569-95a8b25835f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://static.toiimg.com/photo/64560386.cms" width="150" height="200"></amp-img>
</amp-carousel>
3 - Want to show the Image in the Loop?
If you want to show the image in the loop so you have to add one attribute loop in the amp-carousel tag.
After adding this attribute your carousel should look like this ЁЯСЗ
<amp-carousel loop layout="responsive" height="100" width="150" type="slides">
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW5zfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1541800569-95a8b25835f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://static.toiimg.com/photo/64560386.cms" width="150" height="200"></amp-img>
</amp-carousel>
4 - Want to show Auto-Scroll Image Using time interval?
If you want to create auto-scroll images, now again you have to add two attributes.
So these are:
autoplay:
delay: time (in seconds or after which time you want to scroll the images)
After adding this attribute your carousel should look like this ЁЯСЗ
<amp-carousel autoplay dealy="2000" loop layout="responsive" height="100" width="150" type="slides">
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW5zfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1541800569-95a8b25835f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://static.toiimg.com/photo/64560386.cms" width="150" height="200"></amp-img>
</amp-carousel>
Note - Above I added a time interval of 2 seconds
Now it's time to add an amp-carousel to our AMP HTML page.
Step 1 -
Create your AMP HTML page, don't worry if you are not aware of this so just copy the below code and paste it into your HTML page or where you want to show the amp-carousel.
<!DOCTYPE html>
<html amp>
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="Paste your URL here">
<meta name="viewport" content="width=device-width">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
</body>
</html>
Step 2 -
After pasting the code now you have to add an amp-carousel script inside the <head> tag. Copy the below code and paste it inside the head tag.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
After including the amp-carousel script your head section should be looks like this ЁЯСЗ
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="Paste your URL here">
<meta name="viewport" content="width=device-width">
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
Step 3 -
Write some content inside the <body> tag and write CSS using the style amp-custom attribute. i wrote some CSS which i created HTML tags inside the <body> tag. you can have a look below.
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<header>
Hello Folks
</header>
<article>
<h1>Mountain Hiils</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
Step 4 -
Now Final last step add an amp-carousel which one you want to show on your AMP page.
Your final AMP HTML page should look like this.ЁЯСЗ
Copy the below Final HTML and Paste it into your Page.
<!DOCTYPE html>
<html amp>
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="Paste your URL here">
<meta name="viewport" content="width=device-width">
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
</head>
<body>
<header> Hello Folks </header>
<article>
<h1>Mountain Hiils</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<amp-carousel loop autoplay dealy="2000" layout="responsive" height="100" width="150" type="slides">
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bnRhaW5zfGVufDB8fDB8fA==&ixlib=rb-1.2.1&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1541800569-95a8b25835f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" width="150" height="200"></amp-img>
<amp-img layout="responsive" src="https://static.toiimg.com/photo/64560386.cms" width="150" height="200"></amp-img>
</amp-carousel>
</body>
</html>
FAQ -
Q. AMP course for beginners?
A. AMP course is available on youtube click here
Q. What is AMP and AMP introduction?
A. AMP is an open-source framework for reading more click here
Q. How to fix the AMP error?
A. You can find AMP error and resolve them using 3 methods click here
Q. How to add an amp-sidebar?
A. amp-sidebar is a very attractive thing for any site for see more click here
Yeah! You have learned ЁЯШК
I hope you understood this and like this article. if you like it so, please give feedback in the comment section.
If any mistakes I made here, so please let me know and improve me.
If you have any query, feel free to ask me ЁЯШК
Recommended Post
- String Function in PHP
- How to Submit Registration and Login Form in PHP?
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP ?
- How to pass variable from command line using PHP?
- How to get meta tags in 2 easy way in PHP
- How to Reset DropDownList Selection Using jQuery
Post a Comment
Please do not enter any spam link in the comment section.