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

animate-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 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**

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"
    [textColor] = "'red'"
    >
</animate-slider>

Boom!!
That's All you have to do

Documentation

*all important directives

Directive	value	Function
[buttonFill]	true/false	show & hide Button
[buttonOutline]	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) /(Mandatory) if autoPlay is true	Speed
[height]	number (Mandatory)	Slide height
[textColor]	string color-code (optional)	change text color
[buttontextColor]	string color-code (optional)	change button text color
[buttonBorderColor]	string color-code (optional)	change button border color
[buttonBackground]	string color-code (optional)	change fill button background color

without [textColor], [buttontextColor], [buttonBorderColor] text,button will be filled with default white color.

height is calculated as vh. don't put value as px

Available Animation

[ slideFromRight ]
[ slideFromRightFast ]
[ slideFromLeft ]
[ slideFromLeftFast ]
[ slideFromTop ]
[ slideFromBottom ]
[ rotate ]
[ fade ] [ zoomIn ]

(*More animation will be implemented soon)

Important Note

You can add only external-link to the button, don't use Router Link.