Design and build a collaborative user experience for a chance to win cool prizes!
Blog

8 best Polymer carousel web components for your next web app

By  
Binh Bui
Binh Bui
·
On May 2, 2018 8:01:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

The carousel is a sophisticated but super effective UI component. It is used to revolve around a collection of things, mainly pictures, blogs, or products. The right carousel will make your content visually pleasing and eye-catching.

We have produced a list of top 10 best carousel web components in this blog post for you. Keep in mind that all of them are free and can be installed quickly from the Vaadin Directory.

*Note: Each component has been tested on various browsers (C stands for Chrome). There will be a summary table under each component, which has information of the compatibility and some features.

1. Paper-carousel by Redbility

Paper-carousel lets you choose how many slides you want to show on each page. The animations feel smooth. The component can be set for autoplaying with infinite loops. Unfortunately, this carousel cannot reset from the last slide to the first slide.

DemoComponent

2. Skeleton-carousel by FabricElements

Skeleton-carousel enables swiping for both horizontal and vertical direction. You can autoplay it with a defined duration. The slide can merry-go-round from first-to-last, and also from last-to-first. On mobile, navigation by clicking is okay but with sliding, it will move the photos, as well as the whole window too.

DemoComponent

3. L2t-paper-slider by Link2Twenty

To use l2t-paper-slider, each slide must be inside a paper-slide tag, be it an image, a paragraph or just color. Paper-slide comes with a lot of custom properties, such as width, height, font size, the color of dots, etc. You can define the starting position of the carousel, as well as the sensitivity for the swiping. It is, however, unfortunate that merry-go-round can only be achieved with arrow keys, not with mouse drag.

DemoComponent

4. Mp-slider by mpachnis

At first sight, mp-slider looks like a poster we see in a cinema theatre. The component supports only a gallery of images, in which you can use mp-caption to put a caption over the text. The caption can contain a header and a caption. Merry-go-round is available for this component.

DemoComponent

5. Fancy-carousel by annsonn

Being the fanciest one of them all, fancy-carousel provides users with multiple fancy transitions. You can include pictures directly in the pair of tags. Since fancy-carousel implements Custom Search API for images, you just need to input an API key, a CX key, an image topic and all is good to go.

DemoComponent

6. B7-carousel by balint777

B7-carousel will fill the slider with as many pictures as possible. Therefore, users are able to see many pics at once; somehow reflecting a gallery. Even though the mouse drag is not an option, you can scroll horizontally. Due to the use of IntersectionObserver API, an experimental technology, the performance is not stable between browsers.

DemoComponent

7. Sliding-pages by alex-saunders

Sliding-pages treats direct div children as pages, and any nested children will be ignored. Then, you can put block, image, anything in the block, and the component can take care of the animation for you. You can also use the attribute `activeIndex` for changing the active page programmatically.

DemoComponent

8. Simple-carousel by fjsc

Simple-carousel uses the sub-element, carousel-slide, as its pages, in which you can insert HTML content. The component is relatively simple to use, plus you can make it loop with a specific duration.

DemoComponent

Compatibility table

The table below will shortly summarize the component’s info and compatibility on multiple platforms. Browsers include Chrome Canary, Safari Tech Preview, Opera, Firefox Nightly, Edge and Internet Explorer 11.

Component

Library

Mobile

Arrow keys

Mouse drag

Browsers

paper-carousel

Polymer^1.2.0

C,S,O,F,E,I

skeleton-carousel

Polymer^2.0.0

C,S,O,F,E,I

l2t-paper-slider

Polymer 1.9 - 2

C,S,O,F,E,I

mp-slider

Polymer^2.0.0

C,S,O,F

fancy-carousel

Polymer^1.4.0

C,S,O,F,E,I

b7-carousel

Polymer^2.0.0

C,O

sliding-pages

Polymer^2.0.0-rc.2

C,S,O

simple-carousel

Polymer^1.4.0

C,S,O,F,E,I

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui