Skip to content

Latest commit

 

History

History
166 lines (150 loc) · 5.26 KB

README.md

File metadata and controls

166 lines (150 loc) · 5.26 KB
Raw

Published on webcomponents.org Published on Vaadin Directory Stars on vaadin.com/directory

<b7-carousel>

b7-carousel is a carousel designed for real-world use. It is a simplistic approach to a functionally complete carousel element. The main design goal is to have a minimal performance footprint to be well fit for mobile devices. The element features

  • Native performance scrolling and paging
  • A trivial API
  • High level of customizability, with minimal assumptions to the use-cases
  • Touch Scrolling
  • Mouse scrolling
  • Keyboard scrolling
  • Responsive layout

Dependencies

Intersection Observer API

Basic b7-carousel demo

<b7-carousel style="height: 10em">
	<img src="http://placekitten.com/g/640/480">
	<img src="http://placekitten.com/g/480/640">
	<img src="http://placekitten.com/g/600/640">
	<img src="http://placekitten.com/g/300/400">
	<img src="http://placekitten.com/g/200/400">
	<img src="http://placekitten.com/g/500/200">
	<img src="http://placekitten.com/g/640/480">
	<img src="http://placekitten.com/g/480/640">
	<img src="http://placekitten.com/g/600/640">
	<img src="http://placekitten.com/g/300/400">
	<img src="http://placekitten.com/g/200/400">
	<img src="http://placekitten.com/g/500/200">
</b7-carousel>

Customized b7-carousel demo

<style>
	/**
	 * Just a custom chevron
	 */
	b7-carousel#customized .chevron {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 3em;
		color: black;
		font-size: 2em;
		font-family: monospace;
		transition: color 1s ease-in-out;
	}
	b7-carousel#customized .chevron:hover {
		color: #bbb;
	}
	
	/**
	 * The b7-carousel does not make any assumptions on the size, the
	 * type nor the number of items in the carousel, so you are free to
	 * style and compose them.
	 * There are a couble of things though you can not style. These
	 * values are explicitly controlled by b7-carousel
	 * - max-height
	 * - max-width
	 */
	b7-carousel#customized > .item {
		margin: 0 1em;
		box-shadow: 0 .1em 1.5em rgba(0,0,0,0.2);
		/* b7-carousel items are flex aligned to the center by default */
		align-self: center;
	}
	b7-carousel#customized > div.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	/**
	 * Child elements of b7-carousel will receive a b7-visible class
	 * whenever they are visible on the sceen. You can use this property
	 * to create an enry-exit animation for your carousel items
	 */
	b7-carousel#customized > .item {
		opacity: 0;
		transform: perspective(10px) translateZ(-10px);
		transition:
			opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
			transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	b7-carousel#customized > .item.b7-visible {
		opacity: 1;
		transform: perspective(100px) translateZ(0px);
	}
	
</style>
<b7-carousel id="customized" style="height: 15em">
	<div slot="prev" class="chevron">&lt;</div>
	<div slot="next" class="chevron">&gt;</div>

	<img class="item" src="https://picsum.photos/100/100?image=10"/>
	<div class="item">
		<img src="https://picsum.photos/100/100?image=11"/>
		<p>The Rouge One</p>
	</div>
	<img class="item" src="https://picsum.photos/100/100?image=12"/>
	<img class="item" src="https://picsum.photos/100/100?image=13"/>
	<img class="item" src="https://picsum.photos/100/100?image=14"/>
	<img class="item" src="https://picsum.photos/100/100?image=15"/>
	<img class="item" src="https://picsum.photos/100/100?image=16"/>
	<ul class="item" style="padding: 2em">
		<li>I</li>
		<li>am</li>
		<li>a</li>
		<li>list</li>
	</ul>
	<img class="item" src="https://picsum.photos/100/100?image=17"/>
	<img class="item" src="https://picsum.photos/100/100?image=18"/>
	<img class="item" src="https://picsum.photos/100/100?image=19"/>
	<img class="item" src="https://picsum.photos/100/100?image=20"/>
</b7-carousel>

Development guide

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.