16 Repos
Mechanisms for creating hyperlinks that direct users to specific slides within a presentation structure.
Explore 16 awesome GitHub repositories matching user interface & experience · Slide Navigation Links. Refine with filters or upvote what's useful.
This project is a web-native presentation framework that renders slide decks from standard HTML or Markdown. It functions as a declarative slide engine, managing navigation, state persistence, and lifecycle events through a configuration-driven interface. By leveraging standard web technologies, it enables the creation of responsive, browser-based presentations that support complex layouts, nested transitions, and interactive content. The framework distinguishes itself through a modular, plugin-based architecture that allows developers to extend core functionality using custom hooks and event
Creates deep-linkable navigation paths to specific slides using unique identifiers or horizontal and vertical coordinate indexing.
vue-awesome-swiper is a Vue.js component wrapper for the Swiper library, providing a declarative interface for creating touch-enabled carousels. It serves as a virtualized slider component that can render only visible slides to maintain performance when handling large datasets. The project distinguishes itself through high-performance rendering and a wide array of visual effects, including 3D transitions, parallax movements, and image zoom capabilities. It also supports the synchronization of multiple slider instances and provides accessibility features such as ARIA roles and focus-scrolling
Integrates interactive paging, scrolling, and keyboard controls into the slider interface.
Spectacle is a React-based presentation framework that enables developers to author slide decks using JSX and MDX syntax. It provides a component-driven approach to building presentations, where slides are composed as React components with declarative layouts, theme-driven styling, and step-based animation sequencing. The framework distinguishes itself through its support for live coding demonstrations within slides, allowing presenters to execute and display code directly during a talk. It includes a presenter mode with dual-view architecture that shows speaker notes, a timer, and upcoming s
Controls presentation flow with arrow keys and shortcuts for overview, presenter, and fullscreen modes.
TimelineJS is a JavaScript library for creating interactive, chronological narratives and visualizing multimedia sequences. It functions as a tool for data-driven storytelling, rendering a navigable interface where events are organized by date. The system generates these narratives by importing event information from external sources, such as JSON files or spreadsheets. It transforms external media links into embedded video and audio elements and synchronizes the current view with the browser address bar to allow for direct linking and bookmarking. The library covers broad capabilities for d
Enables direct navigation to specific chronological points in the sequence using URL hash tags.
Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It functions as a modular framework for implementing sliding content areas that adapt their layout and settings based on browser window breakpoints. The library is distinguished by a modular architecture that allows the inclusion of only necessary logic to reduce final bundle size. It separates core structural styles from thematic visual styles and utilizes a plugin system to extend the base slider functionality and lifecycle hooks. The component covers a range of interaction and naviga
Provides keyboard arrow controls and programmatic navigation to ensure the sliding content is accessible.
mtheme is a minimalist visual style for creating presentation slides using the LaTeX Beamer document class. It provides a set of formatting rules and a presentation typesetting style designed to optimize slide layout and content spacing. The theme focuses on a clean, low-noise layout that reduces visual clutter to maximize available content space. It includes a visual progress indicator integrated into each frame to track the viewer's position within the slide deck. The project covers academic presentation formatting and technical slide design, utilizing a document typesetting engine to gene
Integrates a visual progress bar into each frame to indicate the current slide position.
WebSlides is a CSS-class-driven presentation framework that turns HTML sections into full-screen slides with keyboard, touch, and remote navigation. Its core architecture defines slides as HTML section elements styled entirely through CSS classes for layout, animation, and background, with a vertical-rhythm spacing foundation using an 8-pixel baseline grid. The framework includes a plugin-based behavior extension system that hooks into slide lifecycle events, and maps each slide to a unique URL hash for direct permalink navigation. The framework distinguishes itself through a comprehensive se
Jumps directly to any slide by its permalink, enabling quick navigation to a particular section.
WebSlides is an open-source tool for creating HTML presentations, landing pages, and longform articles directly in the browser. It provides a full-screen slide deck system where each section element becomes an individual slide with horizontal and vertical navigation, keyboard shortcuts, touch gestures, and remote presenter support. The project distinguishes itself by offering over 40 pre-built slide components such as covers, cards, quotes, and flexible block grids that can be assembled without writing custom layout code. It includes built-in support for embedding rich media like background i
Moves between slides using keyboard shortcuts, swipe gestures, remote presenters, or click-to-nav with permalink support.
Fusuma ist ein Markdown-Präsentations-Framework und ein statischer Slide-Generator, der Markdown- und MDX-Dateien in strukturierte Foliensätze für webbasierte Präsentationen umwandelt. Es fungiert als technischer Content-Renderer und interaktives Präsentationstool, das die Erstellung von Folien aus textbasierten Quelldateien ermöglicht. Das Projekt zeichnet sich als Suite für Vortragende aus und bietet Tools für die Präsentationsprobe wie Sprachaufzeichnung, Timing-Analyse und Proben-Zeitpläne. Es enthält eine dedizierte Ansicht für Vortragende mit Sprechernotizen und unterstützt Echtzeit-Folien-Annotationen sowie Live-Kommentar-Streaming, um die Einbindung des Publikums zu erleichtern. Die Plattform deckt ein breites Spektrum an technischen Rendering-Funktionen ab, einschließlich mathematischer Gleichungen, Flussdiagrammen und syntax-hervorgehobenen Codeblöcken. Sie bietet zudem interaktive Komponenten-Einbettung, Live-Bildschirmaufnahme und die Möglichkeit, Foliensätze als PDF-Dokumente zu exportieren. Die Bereitstellung wird durch Automatisierung für statische Hosting-Umgebungen unterstützt, insbesondere einschließlich GitHub Pages.
Provides controls for cycling through slides and managing transition effects and keyboard accessibility.
Tiny-slider ist eine Vanilla-JavaScript-Carousel-Bibliothek, die zum Erstellen von touch-fähigen Content-Slidern und barrierefreien UI-Komponenten ohne externe Abhängigkeiten verwendet wird. Sie fungiert als responsive Layout-Engine, die die Sichtbarkeit und Dimensionen von Slides basierend auf Viewport-Breakpoints anpasst. Die Bibliothek zeichnet sich durch integriertes Lazy-Loading für Bilder und Medien zur Verbesserung der Seitenleistung sowie ein responsives System aus, das die Anzahl der Elemente und Abstände automatisch an die Bildschirmgröße des Geräts anpasst. Sie unterstützt zudem verschachtelte Slider-Instanzen, was die Erstellung von multidirektional scrollenden Layouts ermöglicht. Das Projekt deckt umfassende Navigations- und Interaktionsfunktionen ab, einschließlich Unterstützung für Tastaturpfeile, Screenreader-Barrierefreiheit und Touch-Gesten-Erkennung. Es bietet Tools für automatisierte Slide-Übergänge, benutzerdefiniertes Navigations-Styling für Paginierung und Buttons sowie ein ereignisgesteuertes System zum Auslösen benutzerdefinierter Logik bei Lebenszyklusänderungen.
Includes interactive previous/next buttons and pagination indicators for manual slide cycling.
mdp ist ein Markdown-Terminal-Präsentationstool und Slide-Deck-Renderer. Es verwendet eine textbasierte Benutzeroberfläche, um Markdown-Dateien in strukturierte Präsentationen zu transformieren, die direkt in der Kommandozeile angezeigt werden. Das Projekt zeichnet sich dadurch aus, dass es sowohl eine terminalbasierte Präsentationsumgebung als auch einen Markdown-zu-PDF-Konverter bietet. Dies ermöglicht es, Folieninhalte in PDF-Dokumente zu exportieren, während Syntax-Highlighting, dunkle Themes und benutzerdefinierte Farben beibehalten werden. Das System verwaltet die Foliennavigation über Tastenkürzel, einschließlich sequenzieller Bewegung und direkter Indizierung. Es unterstützt inkrementelles Aufdecken von Inhalten, wobei spezifische Marker die Ausgabe pausieren, um Bullet-Points oder Textblöcke erst nach Benutzereingabe anzuzeigen. Das Content-Rendering umfasst Unterstützung für Überschriften, Listen, Blockquotes und Code-Blöcke unter Verwendung von UTF-8-Zeichen für visuelle Rahmen und zentrierte Layouts. Das visuelle Erscheinungsbild, einschließlich Hintergrundfarben und Tastenkürzeln, wird über Konfigurationseinstellungen verwaltet.
Provides controls for pausing output and incrementally displaying content based on user keyboard input.
Keen-slider is a JavaScript touch carousel library and DOM-based slider engine. It provides a framework-independent tool for creating responsive, touch-enabled slide carousels that translate swipe inputs into animated transitions for content galleries. The library focuses on responsive design through the use of breakpoints and media queries to automatically adapt layout and behavior across different screen sizes. It supports native touch and swipe gestures compatible with modern web browsers and mobile devices. Its capability surface includes the implementation of navigation controls, infini
Provides interactive arrows, pagination dots, and other controls for cycling through slide content.
Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes
Displays a sequence of slides that users navigate with previous/next controls or indicators, supporting autoplay, orientation, and dynamic slide management.
Freezegun ist eine Python-Time-Mocking-Bibliothek und ein System-Clock-Emulator, der dazu verwendet wird, die Systemuhr auf ein festes Datum und eine feste Uhrzeit einzufrieren. Sie dient als Test-Utility, um sicherzustellen, dass zeitabhängige Logik während der Softwareverifizierung konsistente und vorhersagbare Ergebnisse liefert. Die Bibliothek bietet einen Asyncio-kompatiblen Mock, der reale monotone Uhrwerte bewahrt, um zu verhindern, dass Event-Loops hängen bleiben, während andere Systemzeitfunktionen eingefroren bleiben. Sie unterstützt die Simulation des Zeitverlaufs durch manuelles Vorrücken der Uhr, Springen zu bestimmten Daten oder die Verwendung einer tickenden Uhr-Simulation, die die Zeit automatisch zwischen Aufrufen inkrementiert. Das Tool enthält eine Mocking-Ausschlussliste, um zu verhindern, dass spezifische Bibliotheken abgefangen werden, wodurch sichergestellt wird, dass interne Abhängigkeiten und Drittanbieter-Integrationen stabil bleiben.
Freezegun enables moving the frozen clock forward by a specific increment or jumping to a designated date and time during test execution.
Dieses Projekt ist ein jQuery-Content-Slider zur Erstellung responsiver Bildergalerien und touch-fähiger Karussells. Es fungiert als barrierefreie UI-Komponente, die Bilder, Videos oder HTML-Inhalte mittels hardwarebeschleunigter Animationen anzeigt. Der Slider beinhaltet integrierte Unterstützung für Swipe-Gesten und Finger-Tracking für Touch-Geräte. Er integriert ARIA-Attribute wie Aria Live und Aria Hidden, um die Kompatibilität mit Screenreadern und die Barrierefreiheit für Nutzer assistiver Technologien zu gewährleisten. Das System bietet umfassende Layout- und Navigationsfunktionen, einschließlich konfigurierbarer Übergangsanimationen, Tastaturnavigation und Paginierung. Es unterstützt automatisierte Inhaltsrotation mit timer-basierten Übergängen und bietet programmatische Kontrolle über eine öffentliche API und Lifecycle-Event-Callbacks.
Ships customizable previous, next, start, and stop buttons to control slide movement.
eagle.js ist eine komponentenbasierte Präsentations-Engine und ein webbasiertes Tool zum Erstellen interaktiver digitaler Slideshows. Es fungiert als Vue.js-Slideshow-Framework, das eine Komponentenarchitektur verwendet, um Folienhierarchien und Übergänge innerhalb eines Browsers zu verwalten. Das System zeichnet sich durch die Unterstützung verschachtelter Präsentationshierarchien aus, wodurch Slideshows in andere Folien eingebettet werden können, um komplexe Informationen zu organisieren. Es enthält ein Dual-Window-Synchronisationssystem für einen dedizierten Presenter-Modus, der einen privaten Controller für Sprechernotizen von der öffentlichen Anzeige trennt. Das Framework bietet eine breite Palette interaktiver Funktionen, einschließlich einer Bibliothek von Folien-Widgets, funktionaler Live-Demo-Integration und einer benutzerdefinierten Theme-Engine für visuelles Styling. Die Navigation erfolgt über eine Kombination aus Tastatur-, Maus- und Scroll-Eingaben, mit zusätzlichem Nutzen für das Vergrößern spezifischer Folienbereiche über einen Content-Zoom-Mechanismus.
Tracks current slide and step indices to drive view updates and transition animations.