Directory

← Back

Carousel Addon

Add-on that renders a carousel component

Author

Rating

Popularity

700+

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

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