Contact us Create app

Directory

← Back

Carousel Addon

Add-on that renders a carousel component

Author

Rating

Links

Popularity

1000+

This is a carousel add-on, based on the @xpertsea/paper-slider webcomponent

Sample code

	Slide s1 = new Slide(createSlideContent("Slide 1","green"));
	Slide s2 = new Slide(createSlideContent("Slide 2","blue"));
	Slide s3 = new Slide(createSlideContent("Slide 3","red"));
	Slide s4 = new Slide(createSlideContent("Slide 4","yellow"));

	Carousel c = new Carousel(s1,s2,s3,s4);
	c.setWidth("100%");
	c.setHeight("180px");
	c.addChangeListener(e->Notification.show("changed!",1000,Position.BOTTOM_END));
	c = new Carousel(s1,s2,s3,s4)
			.withAutoProgress()
			.withSlideDuration(4)
			.withStartPosition(1);
	c.addChangeListener(e->Notification.show("changed!",1000,Position.BOTTOM_END));
	Button next = new Button(">>");
	next.addClickListener(e->cf.moveNext());
	Button prev = new Button("<<");
	prev.addClickListener(e->cf.movePrev());
	Button last = new Button(">|");
	last.addClickListener(e->cf.movePos(3));
	Button first = new Button("|<");
	first.addClickListener(e->cf.movePos(0));

Compatibility

(Loading compatibility data...)

Last updated: 2024-05-02

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

New features:

  • BREAKING CHANGE: the web-component is now called fc-l2t-paper-slider
  • Add support for shadow DOM styling (#41)
Released
2024-05-02
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 13 in 1.0.0
Vaadin 12 in 1.0.0
Vaadin 11 in 1.0.0
Vaadin 10 in 1.0.0
Browser
N/A

Carousel Addon - Vaadin Add-on Directory

Add-on that renders a carousel component Carousel Addon - Vaadin Add-on Directory
This is a carousel add-on, based on the [@xpertsea/paper-slider webcomponent](https://www.npmjs.com/package/@xpertsea/paper-slider)
Online Demo
Source Code
Issue Tracker
Author Homepage
Carousel Addon API

Carousel Addon version 1.0.0
Initial release.

Carousel Addon version 2.0.0
Release with support for Vaadin 14+ NPM mode

Carousel Addon version 2.0.1
### Maintenance release. * Replace vaadin dependency with vaadin-core

Carousel Addon version 2.1.0
## New feature * Add position value (index of the slide element) to SlideChangeEvent ([#10](https://github.com/FlowingCode/CarouselAddon/issues/10))

Carousel Addon version 2.1.1
### Bugfixes * Fix position not set in SlideChangeEvent constructor ([#15](https://github.com/FlowingCode/CarouselAddon/issues/15)) * Fix fromClient not used in SlideChangeEvent constructor ([#17](https://github.com/FlowingCode/CarouselAddon/issues/17))

Carousel Addon version 2.1.2
#### Bug fixes: * Correct height handling * Change how properties are handled ([#29](https://github.com/FlowingCode/CarouselAddon/issues/29), [#31](https://github.com/FlowingCode/CarouselAddon/issues/31))

Carousel Addon version 2.1.3
#### Bug fixes: * Make withoutNavigation method hide navigation circles as expected ([#36](https://github.com/FlowingCode/CarouselAddon/issues/36)) * Use setProperty instead of setAttribute ([#38](https://github.com/FlowingCode/CarouselAddon/issues/38))

Carousel Addon version 2.1.4
#### Bug fixes: * Refactor to add paper-slider sources to component * Add detach logic ([#21](https://github.com/FlowingCode/CarouselAddon/issues/21)) * Remove redundant call to updateSlides

Carousel Addon version 3.0.0
#### New features: * BREAKING CHANGE: the web-component is now called fc-l2t-paper-slider * Add support for shadow DOM styling ([#41](https://github.com/FlowingCode/CarouselAddon/issues/41))

Online