pl-slider

Angular 2+ Slider

This slider is created using Angular 4. It is completely written in typescript and nowhere DOM is used to achieve effects. All effects are based on CSS transition and style binding with Angular components.

Example

Above example can be achieved using following code

<pl-slider [data]="itemData"
            height="400px"
            items=4>
</pl-slider>

Above example can be achieved using following code

<pl-slider [data]="itemData"
            height="500px"
            items=1
            controlPosition="in">
</pl-slider>

Installation

First install package via npm

npm install pl-slider

After successfull installation import in app.module.ts

import { PLSlider } from 'pl-slider';
 
@NgModule({
  declarations: [
    ...,
    PLSlider
  ],
  ...
})

Now, use <pl-slider></pl-slider> in any component.

Usage

1. This slider requires JSON array data as input. Create JSON array in respective components (.ts) file.

All the fields in JSON are not necessary, only add those required.

itemData = [
    { image: '/path/slide1.jpg', title: 'Title 1'}, 
    { image: '/path/slide2.jpg', info: 'Some Information Without Title'},
    { image: '/path/slide3.jpg', title: 'Title 3', info: 'Information With Title'},
    { image: '/path/slide4.jpg', title: 'Title 4'},
    { image: '/path/slide5.jpg', title: 'Title 5'},
    { image: '/path/slide6.jpg', title: 'Title 6'},
    { image: '/path/slide7.jpg', title: 'Title 7'},
    { image: '/path/slide8.jpg', title: 'Title 8'}
]

1. Bind that array to data property of slider.

<pl-slider [data]="itemData"></pl-slider>

This will create basic slider with predefined values. (for default values refer Properties table)

1. For more customisations use following properties as needed.

<pl-slider [data]="itemData"
            height="400px"
            items=5
            margin=0.1
            slidesToMove=1
            extraInfo=true
            autoSlide=false
            pauseOnHover=false
            slideDuration=1500
            controlPosition="out">
</pl-slider>

All Properties

Property	Discription	Default Value
height	Height of slider (in any unit)	"400px"
items	items to display in one frame	5
margin	margin between each item	0.1
slidesToMove	Number of slides to move for next or prev event.	1
extraInfo	Addition information after hover on element.	false
autoSlide	Slider will auto slide with default interval of 1500ms.	false
pauseOnHover	Slider will pause when mouse hover over slider container and resume when mouse leaves contaienr.	false
slideDuration	Interval for autoSlide.	1500
controlPosition	'in' or 'out', Position of controls inside or outside of wrapper	out

For any bug or issue

Please raise issue in case of any bug. For detailed disccusion drop me email at [e-mail]

License

MIT

Free Software, Hell Yeah!