https://github.com/t99/tinyscroller
An absolutely abnormally abysmally small image scroller.
https://github.com/t99/tinyscroller
carousel scroller slider
Last synced: over 1 year ago
JSON representation
An absolutely abnormally abysmally small image scroller.
- Host: GitHub
- URL: https://github.com/t99/tinyscroller
- Owner: T99
- License: gpl-3.0
- Created: 2022-07-19T14:30:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T20:16:14.000Z (almost 4 years ago)
- Last Synced: 2025-02-21T00:21:17.098Z (over 1 year ago)
- Topics: carousel, scroller, slider
- Language: JavaScript
- Homepage: https://t99.github.io/tinyscroller
- Size: 503 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 
Tinyscroller
An absolutely abnormally abysmally small image scroller.
### [Find tinyscroller on NPM.](https://www.npmjs.com/package/tinyscroller)
## Table of Contents
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Documentation](#documentation)
- [License](#license)
## Installation
Install from NPM with
```
$ npm install --save tinyscroller
```
## Basic Usage
A new Tinyscroller instance can be initialized using the
`new Tinyscroller(target)` constructor:
```javascript
// By using a CSS selector:
let tinyscroller = new Tinyscroller(".container > div");
// Or by using a pre-fetched DOM node:
let element = document.getElementById("my-tinyscroller-container");
let tinyscroller = new Tinyscroller(element);
```
Tinyscroller comes with a couple of basic options for customization using the `new Tinyscroller(target, options)` constructor:
```javascript
let tinyscroller = new Tinyscroller(target, {
orientation: "horizontal",
fit: "cover",
progress: true,
arrows: false,
});
```
| Option | Type | Default | Description |
|---------------|------------------------------------------|----------------|-----------------------------------------------------------------------------------------------------------|
| `orientation` | `"vertical" \| "horizontal"` | `"horizontal"` | The axis along which images are displayed in this scroller. |
| `fit` | `"contain" \| "cover" \| "fill"` | `"cover"` | The method by which images fill their containers if their aspect ratio does not match the container size. |
| `progress` | `boolean` | `true` | Whether or not progress dots should be overlayed on top of the slider. |
| `arrows` | `boolean` | `true` | Whether or not next/last navigation arrows should be overlayed on top of the slider. |
## Example
## License
tinyscroller is made available under the GNU General Public License v3.
Copyright (C) 2022 Trevor Sears