angular-curtain-slider
Angular directive for curtain-like sliders
Requirements
- requires angular.js to be installed
angular^1.6.2
Installation
- via npm: npm install --save-dev ng-curtain-slider
Usage
-
Add dependency injection in your app module:
angular.module('app', ['ngCurtainSlider']) -
In your html specify route to the styles and script files like this:
<!-- 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:
<!-- Route to the script --><script src="../ng-curtain-slider/src/curtain-slider.min.js"></script> -
In your html file add this directive:
<curtain-slider imgsrc="{left: '../demo/img/cheetah.jpg', right: '../demo/img/tree.jpg'}"></curtain-slider> -
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. -
If you want more discrete or more smooth behaviour of the slider - change the
step
attribute like this:<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