Art 114: Interactive Media and Design

Spring 2026 | Harrisburg Area Community College

Instructor: Rich Hauck, MPS

Component Libraries

Below are a few examples of standalone components libraries that you might reach for when a framework doesn't support your needs.

When chosing one of these libraries, always consider:

  1. Is there a license?
  2. Is there clear documentation with easy-to-recreate examples?
  3. Is the library actively maintained?

Lightboxes

Name Description
LightGallery Feature-rich, modular gallery supporting touch, zoom, thumbnails, video, and plugins.
PhotoSwipe Responsive, mobile-first image gallery with smooth gestures and high performance.
FsLightbox Lightweight, framework-agnostic lightbox for images and video with simple API.
MicroModal Very small, accessible modal library often used for dialog and lightbox-style UI.
baguetteBox.js Simple, responsive image lightbox with captions and CSS-based styling.
Lightbox2 Classic, easy-to-use jQuery lightbox for images (simple gallery and captions).
Fancybox Versatile lightbox with rich media support, animations, gallery features, and extensibility.
GLightbox Pure JavaScript lightbox supporting images, video, HTML content, touch, and accessibility.

Carousel/Slideshow

Name Description
Bootstrap Component part of the Bootstrap framework
Swiper Very modern, mobile-friendly touch slider with a ton of features (lazy loading, virtual slides, effects, etc.).
Glide.js Dependency-free ES6 slider/carousel. Lightweight, modular, and extendable.
Splide Lightweight, flexible, accessible slider written in TypeScript. No external dependencies.
Flickity Touch, responsive, “flickable” carousels with physics-based motion.
Keen-Slider Modern touch slider with great performance and modular API.
Embla Carousel Very light, super smooth, great swipe precision, minimal footprint.
Slick Classic jQuery-based carousel, very mature and feature-rich.
Owl Carousel 2 Another widely used jQuery carousel; responsive and touch-enabled.

Parallax

Name Description
ScrollMagic Very powerful for scroll-based interactions and animations. Supports pinning, triggers, and complex scroll scenes.
skrollr Vanilla JS (no jQuery), data-attribute–based parallax animations. Good for scrolling effects tied to CSS properties.
Rellax Lightweight, performant, vanilla JS parallax library. Great for simple depth effects.
lax.js Very small (~4 kb gzipped), enables smooth and “beautiful” scroll-linked animations (parallax-like) via a simple API.
basicScroll Uses CSS variables + JS to drive parallax. No dependencies, optimized for performance, works on mobile & desktop.
simpleParallax.js Focused on images (and videos) — applies parallax effect to <img> elements. Supports React and vanilla JS.
Parallax.js Uses device orientation (on mobile) or mouse movement (on desktop) to create a parallax effect.
Stellar.js Older but still used: supports background and element parallax, data-attributes-based, works with jQuery.