b7-carousel
b7-carousel is a carousel designed for real-world use. It is a simplistic approach to a functionally complete carousel element.
<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
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"><</div>
<div slot="next" class="chevron">></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.
Links
Compatibility
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
Dependencies
Polymer/polymer#^2.0.0
- Released
- 2018-04-04
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
b7-carousel - Vaadin Add-on Directory
b7-carousel is a carousel designed for real-world use. It is a simplistic approach to a functionally complete carousel element.The Rouge One
- I
- am
- a
- list
Issue tracker
View on GitHub
License
View on NPM
b7-carousel version 0.1
### Dependencies
Polymer/polymer#^2.0.0
* iron-flex-layout#^2.0.3
b7-carousel version 0.1.0
### Dependencies
Polymer/polymer#^2.0.0
* iron-flex-layout#^2.0.3
b7-carousel version 0.1.1
### Dependencies
Polymer/polymer#^2.0.0
* iron-flex-layout#^2.0.3
b7-carousel version 0.1.2
### Dependencies
Polymer/polymer#^2.0.0
* iron-flex-layout#^2.0.3
b7-carousel version 0.1.3
### Dependencies
Polymer/polymer#^2.0.0
* iron-flex-layout#^2.0.3
b7-carousel version 0.1.4
### Dependencies
Polymer/polymer#^2.0.0
b7-carousel version 0.1.5
### Dependencies
Polymer/polymer#^2.0.0
b7-carousel version 0.1.6
### Dependencies
Polymer/polymer#^2.0.0
b7-carousel version 0.1.7
### Dependencies
Polymer/polymer#^2.0.0