ciampo / macro-carousel

Carousel as a Vanilla Web Component.
https://ciampo.github.io/macro-carousel/demo/
MIT License
77 stars 6 forks source link
carousel web-component

<macro-carousel> · npm version Build Status Coverage Status GitHub license

<macro-carousel> is a carousel (vanilla) Web Component.

DEMOS | DOCS

Installation

npm install --save macro-carousel

It is reccommended to install the inert and focus-visible polyfills (listed as peerDependencies).

Running the project locally

Run npm install to install all local dependencies.

Run npm start and open the http://localhost:8080/demo/ page in your browser.

Usage

Please read the full documentation

<macro-carousel>
  <div>First slide</div>
  <div>Second slide</div>
  <div>Third slide</div>
</macro-carousel>

<script src="https://github.com/ciampo/macro-carousel/raw/master/macro-carousel.min.js" defer></script>

For more examples, look at the demos (Live demo, Demo code)

Browser support

WebComponent Polyfills suite

In order for this Web Component to work on all evergreen browsers, you may need to add the WebComponent polyfills suite to your page. (Please note that this repository focuses on the macro-carousel Web Component, and not on the polyfills)

All the demos in this repository already make use of the polyfills (by using webcomponents-loader.js). The source code of the macro-carousel Web Component also makes optional calls to the ShadyCSS polyfill.

Because of the ShadyCSS polyfill limitations, certain style rules are not applied in polyfilled browsers:

For browsers not supporting ES6 classes, the tranpiled ES5 version can be used instead (macro-carousel.es5.min.js), together with the custom-elements-es5-adapter.js polyfill. The es5 demo shows how to do that.

As browser support grows and the polyfills improve, these limitations should become less and less frequent and problematic.

Other known cross-browser limitations

In order to change the color of the navigation button arrow, this project makes use of the mask-image CSS property. Unofruntaly, when this CSS feature is not supported, the color defined through --macro-carousel-navigation-color-focus is not going to be applied correctly to the arrow.

Test

Run npm test to run all tests.

Whishlist

Please have a look at the backlog to see the plan for the next releases.

If you have a feature request, feel free to open an issue!