Overview
Nowadays to get the fast loading of a website generally AMP is used. Basically, it stands for Accelerated Mobile Pages. AMP is an open-source project, it’s free!!. The average loading time of the AMP website is 0.7 seconds. For an interactive website, we generally use sliders but, in AMP we are not allowed to use external CSS and JS. In this article, we will show a way to add a responsive slider in AMP.
1. Advantages of using the slider
A slider is most commonly used in Business, E-commerce, and different types of portfolio websites. We can use the slider for displaying Portfolios, Testimonials, Photo Galleries, Blog listing, and Showcase ECommerce Products.
If we use slider it will help us to show more content that is visible on one screen and it will save the space, it also helps to stop endless scroll down the page.
Make sure that our slider is mobile-friendly because on the desktop if we display 4 items next to each other it may not display well on the mobile resolution. Most of the users are nowadays accessing websites through mobile.
2. Integrate slider in AMP
There are many jQuery Plugins available for slider but AMP doesn’t allow the use of external JS libraries. The amp-carousel component is used on the AMP website but there are no such options available for making the slider responsive. Therefore, for a responsive slider, the amp-base-carousel component is used.
First of all, we need to add the required script for the horizontal or vertical slider.
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
Now, we can use an amp-base-carousel component on our website. For that, we need to add just <amp-base-carousel></amp-base-carousel> tag, and its immediate children is considered as slider items in the slider.
The amp-base-carousel has some required attributes for AMP validation otherwise it will show an error for validation. These required attributes are layout, width, height, and heights. Let’s see one simple example of that…
<amp-base-carousel layout="responsive" width="1" height="1" heights="200px"> <div> Slide 1 </div> <div> Slide 2 </div> ... </amp-base-carousel>
3. Slider attributes and option
- Mixed-Length
The “mixed-length” has either true or false value. Its default value is false. When we need to use a variable-width slide in the slider we can set its value to true. Let’s see one example of it…<amp-base-carousel layout="responsive" width="1" height="1" heights="200px" mixed-length="true"> ... </amp-base-carousel>
- Media Queries
We can set different options values as per different width resolution (media query) in amp-base-carousel without any media queries. Its general structure is as per the following:<amp-base-carousel attributes-name="(min-width: 1200px) value1, (min-width: 992px) value2, defaultValue"> ... </amp-base-carousel>
These option values are executed from left to right side, those values will be executed first which will be matched with a media query and at last default value is required. In this example, when the screen width is 1200px or more than that, value1 will be executed, and if the width is between 1199px and 992px, value2 will be executed, and if the width is 991px or less than defaultValue will be executed.
- Visible-Count
A visible-count number shows how many slides we want to show at a time. By default, its value is one. It also supports fractional values. If we set mixed-length as true than the visible-count value will be ignored. Let’s see one simple example of it…<amp-base-carousel layout="responsive" width="1" height="1" heights="200px" visible-count="3"> ... </amp-base-carousel>
We can also set different values as per different width resolutions as we so in the above topic. Example for visible-count is as per the following:
<amp-base-carousel layout="responsive" width="1" height="1" heights="200px" visible-count="(min-width: 1199px) 4,(min-width: 992px) 3,(min-width: 768px) 2, 1"> ... </amp-base-carousel>
- Advance-Count
An advance-count number shows how many slides you want to scroll at a time when we click on the next or previous arrow. By default, its value is one. It’s used when we have set the visible-count attribute. Let’s see one simple example of it…<amp-base-carousel layout="responsive" width="1" height="1" heights="200px" visible-count="3" advance-count="3"> ... </amp-base-carousel>
We can also set a different value as per different width resolution as we so in the above topic. An example for advance-count is as per the following:
<amp-base-carousel layout="responsive" width="1" height="1" heights="200px" visible-count="(min-width: 992px) 3,(min-width: 768px) 2, 1" advance-count="(min-width: 992px) 3,(min-width: 768px) 2, 1"> ... </amp-base-carousel>
- Auto Advance
- auto-advance:
When we need to change slides automatically on a regular time interval this is useful. It can be either true or false and the default is false. - auto-advance-count:
auto-advance-count shows how many slides we need to change automatically on a regular time interval. It is useful when the visible-count attribute used, by default auto-advance-count value is 1 and It will not work if auto-advance is false. - auto-advance-interval:
auto-advance-interval shows how much time interval we want to set in automatic slide change. We can set this interval in milliseconds and the default interval is 1000 milliseconds. - auto-advance-loops:
auto-advance-interval shows how many times we want to do a slide-show, the slide show will be stopped after a certain value of repeat count. The default value is ∞ (infinite).
- auto-advance:
4. Slider Custom arrows
We can customize navigation arrow buttons by adding our custom markup and it is used inside the amp-base-carousel component. Let’s see one example of it…
<amp-base-carousel ...> <div> Slide 1 </div> <div class="slide"> Slide 2 </div> ... <button slot="next-arrow" class="arrow-next" aria-label="Next">Next</button> <button slot="prev-arrow" class="arrow-prev" aria-label="Previous">Previous</button> </amp-base-carousel>
We can also customize it by using another method. In this method, custom markup is outside the amp-base-carousel component. We need to set ID in component and use this ID in the button “tap” event. Here is the example of that, in this example ID is “custom-arrow-carousel”.
<amp-base-carousel id="custom-arrow-carousel" ...> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> ... </amp-base-carousel> <button on="tap:custom-arrow-carousel.prev()">Previous</button> <button on="tap:custom-arrow-carousel.next()">Next</button>
We can style these arrows by using simple CSS style and adding a class to our custom button and design as per our requirements.
Conclusion
I hope that this blog might be useful to AMP users to create a responsive slider on the AMP website. We have learned different attributes and options of amp-base-carousel and how to customize it. For more such blogs, stay connected!
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
