# jquery.baslider

> baSlider is a simple plugin that allows you to show two pictures: before and after

Latest version **1.0.1** (published 2018-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery.baslider
pnpm add jquery.baslider
yarn add jquery.baslider
bun add jquery.baslider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-04-19 |
| First published | 2018-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Michal Rygielski |
| Maintainers | mrygielski |
| Keywords | slider, before, after, jQuery, jquery-plugin |

## Links

- npm: https://www.npmjs.com/package/jquery.baslider
- Repository: https://github.com/mrygielski/jquery.baSlider
- Homepage: https://mrygielski.github.io/jquery.baSlider/
- Issues: https://github.com/mrygielski/jquery.baSlider/issues
- npm.io page: https://npm.io/package/jquery.baslider

## Dependencies (4)

- [gulp](https://npm.io/package/gulp.md) ^3.9.1
- [gulp-csso](https://npm.io/package/gulp-csso.md) ^3.0.1
- [gulp-concat](https://npm.io/package/gulp-concat.md) ^2.6.1
- [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^3.0.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-04-19
- 2.3.1 — 2018-04-12

## README

# baSlider jQuery Plugin

## Demo & Examples

<https://mrygielski.github.io/jquery.baSlider/>

## Usage

```html
<div class='baSlider'>
    <div class='frame'>
        <div baSlider-handler><img src="images/drag.svg" alt=""></div>
        <div class='before'>
            <img src='images/before.jpg' baSlider-image>
        </div>  
        <div class='after'>
            <div>
                <img src='images/after.jpg' baSlider-image>
            </div>
        </div>  
    </div>
</div>
```

Include jQuery:

```html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
```

Include plugin's CSS and JS:

```html
<link rel="stylesheet" href="src/jquery.baSlider.csss">
<script src="src/jquery.baSlider.js"></script>
```

Call the plugin:

```javascript
$('.baSlider').baSlider();
```

## Options

Here's a list of available settings.

```javascript
$('.baSlider').baSlider({
    align: "horizontal",
    start: {
        horizontal: "50%",
        vertical: "50%"
    },
    anim: {
        play: true,
        startDelay: 4000,
        delay: 2000,
        speed: 300,
        distance: 55,
        times: 2
    },
    handler: {
        position: "auto",
        offsetX: 0,
        offsetY: 0
    },
    speed: 300,
    height: auto,
    imgHeight: auto
});
```

Attribute            | Type                | Default        | Description
---                        | ---                    | ---                | ---
`align`| *String* | `horizontal` | Align of scroll.
`start`| *Array* | - | Place of dividing the photo horizontally & vertically.
`anim`| *Array* | - | Animation configuration.
`handler`| *Array* | -` | Displays the number of stars in a repository.
`reverse`| *Boolean* | `true` | Return to the starting place.
`speed`| *Number* | `auto` | Speed of animation: value (px).
`height`| *String* | `auto` | Available options: auto, value (px).
`imgHeight`| *String* | `auto` | Available options: auto, frame, value (px).

## Installation

You can install jquery.baSlider by using [Bower](http://bower.io/).

```bash
bower install jquery.baSlider
```

Or you can install it through [npm](https://www.npmjs.com/):

```
npm install --save jquery.baslider
```

## License

This plugin is available under [the MIT license](https://opensource.org/licenses/mit-license.php).

## Credits

* The pictures come from the site (http://www.afterbefore.pl)

---
_Source: https://npm.io/package/jquery.baslider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._