From 23e84fd516f0063b3ca875815c54d039a5ba1a45 Mon Sep 17 00:00:00 2001 From: Jesus Vista Date: Tue, 2 Jun 2026 13:45:38 +0800 Subject: [PATCH] feat: add overlap transition effect for carousel navigation - Introduced a new overlap transition effect allowing images to slide over each other during navigation. - Updated the carousel initialization in examples/index.html to demonstrate the new overlap transition. - Enhanced swipe controls to support live dragging for the overlap effect, including visual feedback and snap-back functionality. - Added new CSS variables and styles for the overlap transition, including parallax effects for the current slide. - Updated constants and types to accommodate the new transition effect and related classes. - Implemented transparent background option for the carousel, enhancing visual integration with host pages. --- demo/configurator.ts | 12 +- demo/demo.css | 13 + demo/demo.ts | 12 + demo/index.html | 16 +- dist/carousel.min.js | 4 +- dist/carousel.min.js.map | 2 +- examples/index.html | 32 +++ src/constants/classes.constants.ts | 6 + src/constants/transitions.constants.ts | 1 + src/controls/swipe.controls.ts | 358 +++++++++++++++++++++++-- src/core/carousel.ts | 42 ++- src/core/config.ts | 3 + src/core/types.ts | 4 +- src/styles/index.css | 172 ++++++++++-- 14 files changed, 621 insertions(+), 56 deletions(-) diff --git a/demo/configurator.ts b/demo/configurator.ts index 821fcbc..a6f8368 100644 --- a/demo/configurator.ts +++ b/demo/configurator.ts @@ -23,6 +23,7 @@ export function initConfigurator(): void { const cfgAutoplay = document.getElementById('cfg-autoplay') as HTMLInputElement const cfgCycle = document.getElementById('cfg-cycle') as HTMLInputElement const cfgCoverflow = document.getElementById('cfg-coverflow') as HTMLInputElement + const cfgTransparentBg = document.getElementById('cfg-transparent-bg') as HTMLInputElement const cfgTheme = document.getElementById('cfg-theme') as HTMLSelectElement const cfgTransition = document.getElementById('cfg-transition') as HTMLSelectElement const cfgControlsPosition = document.getElementById('cfg-controls-position') as HTMLSelectElement @@ -42,8 +43,9 @@ export function initConfigurator(): void { autoplay: cfgAutoplay.checked, cycle: cfgCycle.checked, showCoverflow: cfgCoverflow.checked, + transparentBackground: cfgTransparentBg.checked, theme: cfgTheme.value as 'light' | 'dark', - transitionEffect: cfgTransition.value as 'fade' | 'slide' | 'zoom' | 'flip', + transitionEffect: cfgTransition.value as 'fade' | 'slide' | 'zoom' | 'flip' | 'overlap', controlsPosition: cfgControlsPosition.value as 'center' | 'bottom', zoomMin: parseFloat(cfgZoomMin.value), zoomMax: parseFloat(cfgZoomMax.value), @@ -61,6 +63,7 @@ export function initConfigurator(): void { if (config.autoplay) opts.push(` autoplay: true,`) if (!config.cycle) opts.push(` cycle: false,`) if (config.showCoverflow) opts.push(` showCoverflow: true,`) + if (config.transparentBackground) opts.push(` transparentBackground: true,`) if (config.theme !== 'light') opts.push(` theme: '${config.theme}',`) if (config.transitionEffect !== 'fade') opts.push(` transitionEffect: '${config.transitionEffect}',`) if (config.controlsPosition !== 'center') opts.push(` controlsPosition: '${config.controlsPosition}',`) @@ -78,6 +81,9 @@ export function initConfigurator(): void { const posLabel = cfgControlsPosition.closest('label') as HTMLElement posLabel.style.display = cfgControls.checked ? '' : 'none' + // Reveal a checkerboard behind the carousel so transparency is visible + viewerEl!.classList.toggle('is-transparent-preview', config.transparentBackground === true) + // Destroy and recreate (carousel doesn't have an update() method) if (instance) { viewerEl!.style.minHeight = `${viewerEl!.offsetHeight}px` @@ -105,8 +111,8 @@ export function initConfigurator(): void { } // Bind all controls to rebuild - ;[cfgThumbnails, cfgBullets, cfgControls, cfgFilenames, cfgAutoplay, cfgCycle, cfgCoverflow].forEach((el) => - el.addEventListener('change', rebuild), + ;[cfgThumbnails, cfgBullets, cfgControls, cfgFilenames, cfgAutoplay, cfgCycle, cfgCoverflow, cfgTransparentBg].forEach( + (el) => el.addEventListener('change', rebuild), ) ;[cfgTheme, cfgTransition, cfgControlsPosition].forEach((el) => el.addEventListener('change', rebuild)) ;[cfgZoomMin, cfgZoomMax, cfgZoomStep].forEach((el) => el.addEventListener('change', rebuild)) diff --git a/demo/demo.css b/demo/demo.css index 7701d9c..b6a14aa 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -799,6 +799,19 @@ p code { border-radius: var(--demo-radius-sm); } +/* Checkerboard backdrop — only shown while the transparent-background option is + on, so the see-through effect is obvious in the preview. */ +#configurator-carousel.is-transparent-preview { + background-image: + linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%), + linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.08) 75%); + background-size: 24px 24px; + background-position: + 0 0, + 12px 12px; + border-radius: 16px; +} + .demo-configurator-panel { display: flex; flex-direction: column; diff --git a/demo/demo.ts b/demo/demo.ts index bd42b6e..97cc61a 100644 --- a/demo/demo.ts +++ b/demo/demo.ts @@ -134,6 +134,18 @@ new CloudImageCarousel('#transition-flip', { showBullets: true, }).init() +// ========================================================================== +// Transition: overlap (cover) — drag to navigate +// ========================================================================== + +new CloudImageCarousel('#transition-overlap', { + images: DEMO_IMAGES, + transitionEffect: 'overlap', + cycle: true, + showThumbnails: false, + showBullets: true, +}).init() + // ========================================================================== // Zoom: default config // ========================================================================== diff --git a/demo/index.html b/demo/index.html index 42ee29b..9bdb940 100644 --- a/demo/index.html +++ b/demo/index.html @@ -321,7 +321,7 @@

Bottom

Effects

Transitions

-

Four built-in effects with configurable easing and duration via CSS variables.

+

Five built-in effects with configurable easing and duration via CSS variables.

@@ -360,6 +360,15 @@

Flip

+
+
+

Overlap (drag)

+

transitionEffect: 'overlap' — drag the image to navigate

+
+
+
+
+
@@ -456,6 +465,10 @@

Options

Coverflow +