Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
embla-carousel
Advanced tools
embla-carousel - npm Package Compare versions
Comparing version 0.8.4 to 0.8.5
| { | ||
| "name": "embla-carousel", | ||
| "version": "0.8.4", | ||
| "version": "0.8.5", | ||
| "author": "David Cetinkaya", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -1,20 +0,25 @@ | ||
| <p> | ||
| <br> | ||
| <a href="https://davidcetinkaya.github.io/embla-carousel/" target="_blank"> | ||
| <img width="70" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel"> | ||
| <br /> | ||
| <p align="center"> | ||
| <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank"><img width="80" height="80" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel"> | ||
| </a> | ||
| <h1 align="center">Embla Carousel</h1> | ||
| </p> | ||
| <p align="center"> | ||
| An extensible low level carousel for the web, written in TypeScript. | ||
| </p> | ||
| <p align="center"> | ||
| <a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a> | ||
| <a href="https://www.npmjs.com/package/embla-carousel" target="_blank"><img src="https://img.shields.io/npm/v/embla-carousel.svg"></a> | ||
| <a href="https://travis-ci.org/davidcetinkaya/embla-carousel" target="_blank"><img src="https://img.shields.io/travis/davidcetinkaya/embla-carousel/master.svg"></a> | ||
| <a href="https://prettier.io" target="_blank"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a> | ||
| </p> | ||
| <p align="center"> | ||
| <strong> | ||
| <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank">« View Demo »</a> | ||
| </strong> | ||
| </p> | ||
| # Embla Carousel · [](https://twitter.com/intent/tweet?text=Build%20amazing%20JavaScript%20carousels%20with%20Embla%20Carousel&url=https://davidcetinkaya.github.io/embla-carousel&via=david_cetinkaya&hashtags=frontend,javascript,webdeveloper,developers,coders) | ||
|     | ||
| > An extensible low level carousel for the web, written in TypeScript. | ||
| Embla's purpose is to provide a low level carousel and allow developers to extend it by using its available methods. Extend it with some very basic JavaScript and build awesome physics simulated carousels. It's dependency free and 100% open source. | ||
| ## Table of contents | ||
| - [Demo](#demo) | ||
| - [Implementations](#implementations) | ||
| - [What's Embla?](#whats-embla) | ||
| - [Features](#features) | ||
@@ -25,21 +30,19 @@ - [Installation](#installation) | ||
| - [API](#api) | ||
| - [Implementations](#implementations) | ||
| - [Contributing](#contributing) | ||
| - [License](#license) | ||
| ## Demo | ||
| ## What's Embla? | ||
| Try Embla Carousel on the [Demo Page](https://davidcetinkaya.github.io/embla-carousel) or [CodeSandbox](https://codesandbox.io/s/embla-carousel-loop-false-oyols). | ||
| Embla’s purpose is to provide a low level carousel and allow developers to extend it by using its available methods. Extend it with some very basic JavaScript and build awesome physics simulated carousels. It’s dependency free and 100% open source. | ||
| ## Implementations | ||
| Try it here on the [Demo Page](https://davidcetinkaya.github.io/embla-carousel) or [CodeSandbox](https://codesandbox.io/s/embla-carousel-loop-false-oyols). | ||
| [<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="60" alt="Embla Carousel JavaScript" />](https://github.com/davidcetinkaya/embla-carousel) [<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="60" alt="Embla Carousel React" />](https://github.com/davidcetinkaya/embla-carousel-react) | ||
| ## Features | ||
| - Responsive out of the box. | ||
| - Choose any slide widths for your slides in `%`. | ||
| - Seamless loop effect with no pauses. | ||
| - Authentic cross device drag behaviour. | ||
| - Extensible low-level API to control the carousel. | ||
| - `%` based hardware accelerated transitions. | ||
| - Physics simulated animation. | ||
| - **`Responsive out of the box`** - Choose any slide widths for your slides in `%`. | ||
| - **`Seamless loop effect`** - No pauses or previous/next button throttling. | ||
| - **`Hardware accelerated`** - Smooth physics simulated animations. | ||
| - **`Extensible rich API`** - Comes with a low-level API to control the carousel. | ||
| - **`Realistic drag handling`** - Authentic cross device drag behaviour. | ||
@@ -51,3 +54,5 @@ ## Installation | ||
| ```bash | ||
| yarn add embla-carousel | ||
| ``` | ||
@@ -91,2 +96,3 @@ | ||
| } | ||
| .embla__container { | ||
@@ -96,2 +102,3 @@ display: flex; | ||
| } | ||
| .embla__slide { | ||
@@ -198,3 +205,3 @@ position: relative; | ||
| **`goTo(index: number)`** | ||
| **`goTo(index: number)`** | ||
| Moves to item that matches passed index. If `loop` option is set to `true` the carousel will seek the closest way to the passed index. | ||
@@ -220,4 +227,12 @@ | ||
| ## Implementations | ||
| [<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/javascript-logo.svg" height="60" alt="Embla Carousel JavaScript" />](https://github.com/davidcetinkaya/embla-carousel) [<img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/react-logo.svg" height="60" alt="Embla Carousel React" />](https://github.com/davidcetinkaya/embla-carousel-react) | ||
| ## Contributing | ||
| If you like this project, you can show your support by giving it a **`star`** ⭐ or spreading the word about it on **`twitter`** 📣 or similar. Code related contribution guidelines are on their way... | ||
| ## License | ||
| Embla is [MIT licensed](./LICENSE). |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.79%
66914
- Number of lines in readme file
- increased by6.88%
233
No dependency changes