Angular slider library
Navigate to the level of your package.json and type
npm install ng2-slider --save
or with yarn
yarn add ng2-slider
Import in your module.
import { SliderModule } from 'ng2-slider';
@NgModule({
imports: [
SliderModule
]
})
export class AppModule { }
In your Html component
<lib-slider [slides]="slides"></lib-slider>
In your TS component declare the object
slides: ISlide[] = [
{
"img":"http://lorempixel.com/output/animals-q-g-640-320-10.jpg",
"title":"<b> Some random title</b><br> example",
"button":{
"text":"CLICK ON ME"
}
},
{
"img":"http://lorempixel.com/output/animals-q-g-640-320-10.jpg",
"title":"<b> Some random title</b><br> example",
"button":{
"text":"CLICK ON ME"
}
},
{
"img":"http://lorempixel.com/output/animals-q-g-640-320-10.jpg",
"title":"<b> Some random title</b><br> example",
"button":{
"text":"CLICK ON ME"
}
},
{
"img":"http://lorempixel.com/output/animals-q-g-640-320-10.jpg",
"title":"<b> Some random title</b><br> example",
"button":{
"text":"CLICK ON ME"
}
}
]
You can use square bullets
<lib-slider [slides]="slides" [squareBullets]="true"></lib-slider>