1.1.5 • Published 7 years ago
ng-curtain-slider v1.1.5
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