# ng-curtain-slider

> Angular directive for curtain-like slider

Latest version **1.1.6** (published 2025-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-curtain-slider
pnpm add ng-curtain-slider
yarn add ng-curtain-slider
bun add ng-curtain-slider
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2025-10-02 |
| First published | 2017-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Zavrak Valentine |
| Maintainers | zavrakv |
| Keywords | angular, slider, curtain, slider, slider, curtain-slider, slider, directive |

## Links

- npm: https://www.npmjs.com/package/ng-curtain-slider
- Repository: https://github.com/zavrakv/angular-curtain-slider
- Homepage: https://github.com/zavrakv/angular-curtain-slider#readme
- Issues: https://github.com/zavrakv/angular-curtain-slider/issues
- npm.io page: https://npm.io/package/ng-curtain-slider

## Dependencies (1)

- [angular](https://npm.io/package/angular.md) ^1.6.2

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.1.6 (latest) — 2025-10-02
- 1.1.5 — 2017-02-10
- 1.1.4 — 2017-02-09
- 1.1.3 — 2017-02-09
- 1.1.2 — 2017-02-09
- 1.1.1 — 2017-02-09
- 1.1.0 — 2017-02-09
- 1.0.0 — 2017-02-08

## README

# Angular-curtain-slider
Angular directive for curtain-like sliders. It is a slider, fit for demonstration of before and after results (watch the demo below)

# [Demo](https://zavrakv.github.io/angular-curtain-slider/)

# Requirements 

* requires angular.js to be installed `angular^1.6.2`

# Installation

* via npm: npm install --save-dev ng-curtain-slider

# Usage

1. Add dependency injection in your app module:
    
   ```JavaScript
   angular.module('app', ['ngCurtainSlider'])
   ```
   
2. In your html specify route to the styles and script files like this:
   
   ```HTML
   <!-- CSS goes here: -->
   <link rel="stylesheet" href="../ng-curtain-slider/src/css/curtain-slider.min.css">   
   ```
   Then, after you add your angular.js script, add this:
   ```HTML
   <!-- Route to the script -->
   <script src="../ng-curtain-slider/src/curtain-slider.min.js"></script>
    ```

3. In your html file add this directive:

   ```HTML
   <curtain-slider imgsrc="{left: '../demo/img/cheetah.jpg', right: '../demo/img/tree.jpg'}"></curtain-slider>
   ```
  
4. Specify your own object inside `imgsrc` attribute. `left` represents the URL to the left image in slider, `right` - URL to the right  image in slider.

5. If you want more discrete or smooth behaviour of the slider - change the `step` attribute like this:

   ```HTML
   <curtain-slider imgsrc="{left: '../demo/img/cheetah.jpg', right: '../demo/img/tree.jpg'}" 
                    step="1"></curtain-slider>
   ```
   Value of step varies from 0.1 (very smooth) to 100 (one swipe will open or close the curtain). Default step: 0.1

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