This is a powerfull responsive Angular7 slider with **animation** added
npm install animated-slider
npm install animated-slider
`
Once installed, add the slider to your app.module.ts:
`
import { AnimateSliderModule } from "animated-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**
1. slideAnimation is used for Slide animation
2. textAnimation is used for Caption Text animation
3. buttonAnimation is used for Button animation
4. text is used for Caption Text
5. slideUrl is used for Image
6. buttonText is used for Button Text
7. 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:
`
[captionText] = "true"
[slide] = "images"
[autoPlay] = "false"
[speed] = "1000"
[height] = "40"
[textColor] = "'red'"
>
``