ngx-vertical-slider
v1.2.0
Published
Slider vertical de medios para Angular 19+. Soporta imágenes y vídeos (autoplay, loop, poster, mute toggle, barra de progreso), scroll snap, doble-tap para like, animación de burst y soporte de teclado.
Downloads
7
Maintainers
franmasterReadme
ngx-vertical-slider
Slider vertical de medios para Angular 19+ y como Web Component standalone (selector <media-slider>).
- Soporta imágenes y vídeos (campo
type: 'image' | 'video'). - Scroll snap vertical, un slide por viewport.
- Auto-play / pause de vídeos al entrar/salir del viewport (
IntersectionObserver). - Vídeos con
loop,playsinline,posteropcional y barra de progreso fina en la base. - Botón global de mute / unmute (esquina superior derecha) — solo aparece si hay al menos un vídeo en el feed. Estado compartido entre todos los slides.
- Doble-tap o tecla
Lpara dar like, con animación de burst. - Soporte de teclado: flechas /
PageUp/PageDownpara navegar,Espaciopara play/pause. - Standalone component sin dependencias externas.
Uso como librería Angular
Instalación
npm install ngx-vertical-sliderEn tu componente
import { Component, signal } from '@angular/core';
import { MediaSliderComponent, SlideData } from 'ngx-vertical-slider';
@Component({
selector: 'app-feed',
standalone: true,
imports: [MediaSliderComponent],
template: `<media-slider [slides]="slides()" (doubleTap)="onLike()" />`,
})
export class FeedComponent {
readonly slides = signal<SlideData[]>([
{
type: 'image',
media: 'https://picsum.photos/720/1280',
user: '@demo',
avatar: 'https://i.pravatar.cc/100',
caption: 'Hola mundo',
music: 'sonido original',
counts: { like: '1.2K', comment: '340', bookmark: '89' },
},
{
type: 'video',
media: 'https://example.com/clip.mp4',
user: '@demo',
avatar: 'https://i.pravatar.cc/100',
caption: 'Vídeo con autoplay + loop',
music: 'mute por defecto',
counts: { like: '8K' },
},
]);
onLike() {
console.log('liked');
}
}API
@Component({ selector: 'media-slider', standalone: true })
class MediaSliderComponent {
slides = input.required<readonly SlideData[]>();
doubleTap = output<void>();
mutedChange = output<boolean>(); // emite al cambiar mute global
}
interface SlideData {
type: 'image' | 'video'; // requerido
media: string; // URL absoluta a imagen o vídeo
poster?: string; // (vídeos) frame previo mientras carga
user: string;
avatar: string;
caption: string;
music: string;
counts: Partial<Record<SlideAction, string>>;
}
type SlideAction = 'like' | 'comment' | 'bookmark' | 'share';
type SlideMediaType = 'image' | 'video';Uso como Web Component (cualquier framework / HTML plano)
Carga el bundle generado por npm run build:element (un único .js con todas las dependencias incluidas):
<!doctype html>
<html>
<body>
<media-slider id="feed"></media-slider>
<script src="./media-slider-element.js"></script>
<script>
document.getElementById('feed').slides = [
{
type: 'image',
media: 'https://picsum.photos/720/1280',
user: '@demo',
avatar: 'https://i.pravatar.cc/100',
caption: 'Hola mundo',
music: 'sonido original',
counts: { like: '1.2K' },
},
{
type: 'video',
media: 'https://example.com/clip.mp4',
user: '@demo',
avatar: 'https://i.pravatar.cc/100',
caption: 'Vídeo con autoplay',
music: 'sonido original',
counts: { like: '8K' },
},
];
document.getElementById('feed').addEventListener('doubleTap', () => {
console.log('liked');
});
</script>
</body>
</html>El input
slidesse asigna como propiedad (no como atributo HTML), porque es un array.
Atajos de teclado
| Tecla | Acción |
| ------------------ | ----------------------- |
| ↓ / PageDown | Slide siguiente |
| ↑ / PageUp | Slide anterior |
| Espacio | Play / pause del vídeo |
| L | Like |
| M | Mute / unmute global |
Licencia
MIT