15th Sep 2020

How to Add a Responsive Slider in AMP

UI/UX

Written By, Rajnee Makwana

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.

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…

3. Slider attributes and option

  1. 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…
  2. 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:

    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.
  3. 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…

    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:
  4. 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…


    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:
  5. 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).

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…

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

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!

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd