lexzhukov / Ngx Siema
Licence: mit
Lightweight and simple carousel with no dependencies.
Stars: ✭ 46
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngx Siema
Vue Glide
A slider and carousel as vue component on top of the Glide.js
Stars: ✭ 225 (+389.13%)
Mutual labels: component, carousel
React Spring Slider
A slider component for react
Stars: ✭ 118 (+156.52%)
Mutual labels: component, carousel
Vue Picture Swipe
🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe
Stars: ✭ 322 (+600%)
Mutual labels: component, carousel
React Currency Formatter
💵 react component for currency formatting
Stars: ✭ 38 (-17.39%)
Mutual labels: component
React Native Really Awesome Button
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱
Stars: ✭ 988 (+2047.83%)
Mutual labels: component
Componentfixture
🛠️Interactive sandox playground for vue components
Stars: ✭ 44 (-4.35%)
Mutual labels: component
React Sider
Lightweight Ant Design Pro like <Sider /> component integrated with Ant Design Menu.
Stars: ✭ 42 (-8.7%)
Mutual labels: component
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (+2108.7%)
Mutual labels: component
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-15.22%)
Mutual labels: carousel
Vue Glitch
👻 Vue.js component to apply glitch effect in any kind of text
Stars: ✭ 44 (-4.35%)
Mutual labels: component
Vue Drag Resize
Vue Component for resize and drag elements
Stars: ✭ 1,007 (+2089.13%)
Mutual labels: component
Shudan
A highly customizable, low-level Preact Goban component.
Stars: ✭ 43 (-6.52%)
Mutual labels: component
ngx-siema
THIS REPOSITORY IS NO LONGER IN USE.
Siema - Lightweight and simple carousel with no dependencies.
Installation
npm i ngx-siema
Sample
Include NgxSiemaModule in your main module:
import { NgxSiemaModule } from 'ngx-siema';
@NgModule({
// ...
imports: [
NgxSiemaModule.forRoot(),
],
// ...
})
export class AppModule { }
Then use in your component:
import { Component } from '@angular/core';
import { NgxSiemaOptions } from 'ngx-siema';
@Component({
selector: 'sample',
template: `
<ngx-siema [options]="options">
<ngx-siema-slide>
<img src="assets/siema--pink.svg">
</ngx-siema-slide>
<ngx-siema-slide>
<img src="assets/siema--yellow.svg">
</ngx-siema-slide>
<ngx-siema-slide>
<img src="assets/siema--pink.svg">
</ngx-siema-slide>
</ngx-siema>
`,
})
export class SampleComponent implements OnInit {
options: NgxSiemaOptions = {
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
threshold: 20,
loop: false,
onInit: () => {
// runs immediately after first initialization
},
onChange: () => {
// runs after slide change
},
};
}
Example of usage with the navigation buttons:
import { Component } from '@angular/core';
import { NgxSiemaService } from 'ngx-siema';
@Component({
selector: 'sample',
template: `
<ngx-siema [options]="options">
<ngx-siema-slide>
<img src="assets/siema--pink.svg">
</ngx-siema-slide>
<ngx-siema-slide>
<img src="assets/siema--yellow.svg">
</ngx-siema-slide>
<ngx-siema-slide>
<img src="assets/siema--pink.svg">
</ngx-siema-slide>
</ngx-siema>
<button type="button" (click)="prev()">Prev</button>
<button type="button" (click)="next()">Next</button>
<button type="button" (click)="goTo()">GoTo</button>
`,
})
export class SampleComponent {
options: NgxSiemaOptions = {
selector: '.siema',
};
constructor(private ngxSiemaService: NgxSiemaService) {
}
prev() {
this.ngxSiemaService.prev(1)
.subscribe((data: any) => console.log(data));
}
next() {
this.ngxSiemaService.next(1)
.subscribe((data: any) => console.log(data));
}
goTo() {
this.ngxSiemaService.goTo(1)
.subscribe((data: any) => console.log(data));
}
}
Example of usage with multiple instances of ngx-siema
import { Component } from '@angular/core';
import { NgxSiemaOptions, NgxSiemaService } from 'ngx-siema';
@Component({
selector: 'sample',
template: `
<ngx-siema [options]="options">
<ngx-siema-slide *ngFor="let n of slides">{{ n }}</ngx-siema-slide>
</ngx-siema>
<ngx-siema [options]="options2">
<ngx-siema-slide *ngFor="let n of slides">{{ n }}</ngx-siema-slide>
</ngx-siema>
<button type="button" (click)="next()">Next</button>
<button type="button" (click)="prev()">Prev</button>
`,
})
export class SampleComponent {
options: NgxSiemaOptions = {
selector: '.siema',
};
options2: NgxSiemaOptions = {
selector: '.siema2',
};
slides: number[] = [1, 2, 3, 4, 5];
constructor(private ngxSiemaService: NgxSiemaService) {
}
next() {
this.ngxSiemaService.next(1)
.subscribe((data: any) => {
console.log(data);
});
}
prev() {
// Use the prev function only for ngx-siema instance with selector '.siema'
this.ngxSiemaService.prev(1, '.siema')
.subscribe((data: any) => {
console.log(data);
});
}
}
License
MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].