Package Exports
- animated-slider
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (animated-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
animated-slider
This is a powerfull responsive Angular7 slider with animation added
Demo
Slider text font will be change with your project font
Checkout the Demo...Click Here
Installation
To add the slider to your Angular project:
npm install animate-slider
Once installed, add the slider to your app.module.ts:
import { AnimateSliderModule } from "animate-slider";
...
@NgModule({
imports: [
AnimateSliderModule ,
...
]
})
export class AppModule {}
Sample usage
@Component({...})
export class AppComponent {
slides= [
{
slideUrl: 'your image url',
slideAnimation:"fade",
text: "Your Text",
textAnimation : "slideFromLeft",
buttonText :"Your button text",
buttonLink: "button link",
buttonAnimation: "slideFormRight"
},
...
...
}
Don't chnage the object property name in the array**
- slideAnimation is used for Slide animation
- textAnimation is used for Caption Text animation
- buttonAnimation is used for Button animation
- text is used for Caption Text
- slideUrl is used for Image
- buttonText is used for Button Text
- buttonLink is used for Button Link
if you don't want the animation/anything just remove the property form the object.
if you set button and text to false please remove all button or text property from your slide array for better performance.
And in template file app.component.html:
<animate-slider
[button]= "true"
[captionText] = "true"
[slide] = "images"
[autoPlay] = "false"
[speed] = "1000"
[height] = "40">
</animate-slider>
Boom!!
That's All you have to do
Documentation
*all important directives
Directive | value | Function |
---|---|---|
[button] | true/false | show & hide Button |
[captionText] | true/false | show & hide Caption text |
[slide] | Array of your slide (Mandatory) | For each slider |
[autoPlay] | true/false (optional) | Auto rotate slide |
[speed] | number (optional) | Speed |
[height] | number (Mandatory) | Slide height |
height is calculated as vh. don't put value as px
Available Animation
[ slideFromRight ]
[ slideFromRightFast ]
[ slideFromLeft ]
[ slideFromLeftFast ]
[ slideFromTop ]
[ slideFromBottom ]
[ rotate ]
[ fade ]
(*More animation will be implemented soon)
Important Note
You can add only external-link to the button, don't use Router Link.