Skip to content

Commit

Permalink
docu, only allow html element as container
Browse files Browse the repository at this point in the history
  • Loading branch information
berndartmueller committed Aug 27, 2020
1 parent c386433 commit 138b32f
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 4 deletions.
83 changes: 82 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,11 @@ Virchual uses virtual slides to only render visible slides. No unnecessary DOM e

```sh
$ npm install virchual
```

or

```sh
$ yarn install virchual
```

Expand All @@ -67,7 +69,7 @@ Example HTML:
</div>
```

```javascript
```ts
import { Virchual } from 'virchual';

const slider = new Virchual(document.querySelector('.virchual'), {
Expand All @@ -91,6 +93,73 @@ slider.mount();

## API

- [Virchual](#virchual)

- [Virchual#mount](#virchualmount)
- [Virchual#unmount](#virchualunmount)
- [Virchual#on](#virchualon)
- [Virchual#off](#virchualoff)
- [Virchual#prev](#virchualprev)
- [Virchual#next](#virchualnext)

## Virchual

```ts
Virchual(element: HTMLElement, settings: VirchualSettings): Virchual
```

Virchual constructor. It creates a new Virchual slider instance.

---

### Virchual#mount

---

```ts
Virchual.mount();
```

### Virchual#unmount

---

```ts
Virchual.unmount();
```

### Virchual#on

---

```ts
Virchual.on();
```

### Virchual#off

---

```ts
Virchual.off();
```

### Virchual#prev

---

```ts
Virchual.prev();
```

### Virchual#next

---

```ts
Virchual.next();
```

<br/>

<!-- CONTRIBUTING -->
Expand All @@ -111,6 +180,18 @@ git clone github.com/berndartmueller/virchual.git
npm install
```

2. Run

```sh
npm run dev
```

### Running Tests

```sh
npm run test
```

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
Expand Down
4 changes: 1 addition & 3 deletions src/virchual.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export type VirchualSettings = {
};

export class Virchual {
container: HTMLElement;
frame: HTMLElement;
paginationButtons: HTMLButtonElement[];
currentIndex = 0;
Expand All @@ -37,8 +36,7 @@ export class Virchual {
onPaginationButtonClick: () => identity;
};

constructor(element: HTMLElement | string, public settings: VirchualSettings = {}) {
this.container = element instanceof Element ? element : document.querySelector(element);
constructor(public container: HTMLElement, public settings: VirchualSettings = {}) {
this.frame = this.container.querySelector('.virchual__frame');
this.paginationButtons = [].slice.call(this.container.querySelectorAll('.virchual__control'));

Expand Down

0 comments on commit 138b32f

Please sign in to comment.