npm - peek-carousel - Versions diffs - 1.0.2 - Mend

peek-carousel 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/LICENSE +21 -0
package/README.en.md +238 -0
package/README.md +234 -0
package/dist/peek-carousel.css +1 -0
package/dist/peek-carousel.esm.js +1368 -0
package/dist/peek-carousel.esm.js.map +1 -0
package/dist/peek-carousel.esm.min.js +8 -0
package/dist/peek-carousel.esm.min.js.map +1 -0
package/dist/peek-carousel.js +1376 -0
package/dist/peek-carousel.js.map +1 -0
package/dist/peek-carousel.min.css +1 -0
package/dist/peek-carousel.min.js +8 -0
package/dist/peek-carousel.min.js.map +1 -0
package/examples/example-built.html +367 -0
package/examples/example.css +2216 -0
package/examples/example.js +404 -0
package/examples/example.min.css +1 -0
package/examples/example.min.js +1 -0
package/package.json +92 -0
package/src/core/PeekCarousel.js +294 -0
package/src/core/config.js +49 -0
package/src/core/constants.js +73 -0
package/src/modules/Animator.js +244 -0
package/src/modules/AutoRotate.js +43 -0
package/src/modules/EventHandler.js +390 -0
package/src/modules/Navigator.js +116 -0
package/src/modules/UIManager.js +170 -0
package/src/peek-carousel.d.ts +34 -0
package/src/styles/base/_accessibility.scss +16 -0
package/src/styles/base/_mixins.scss +7 -0
package/src/styles/base/_variables.scss +75 -0
package/src/styles/components/_carousel.scss +5 -0
package/src/styles/components/_counter.scss +109 -0
package/src/styles/components/_indicators.scss +154 -0
package/src/styles/components/_navigation.scss +193 -0
package/src/styles/components/carousel/_carousel-base.scss +99 -0
package/src/styles/components/carousel/_carousel-classic.scss +76 -0
package/src/styles/components/carousel/_carousel-mixins.scss +18 -0
package/src/styles/components/carousel/_carousel-radial.scss +72 -0
package/src/styles/components/carousel/_carousel-stack.scss +84 -0
package/src/styles/components/carousel/_carousel-variables.scss +118 -0
package/src/styles/peek-carousel.scss +11 -0
package/src/utils/dom.js +53 -0
package/src/utils/helpers.js +46 -0
package/src/utils/icons.js +92 -0
package/src/utils/preloader.js +69 -0
package/types/index.d.ts +34 -0

package/examples/example-built.html ADDED Viewed

@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PeekCarousel - iPhone 17 Pro inspired carousel library</title>
+  <meta name="description" content="A modular carousel library with 3 layout modes (Stack/Card, Radial, Classic) featuring peek effect, touch/drag support, and full accessibility.">
+  <meta name="keywords" content="carousel, slider, peek, stack, card, swipe, gallery, apple, responsive, touch, drag, mobile, vanilla javascript, ES6">
+  <meta name="author" content="PeekCarousel">
+  <meta name="theme-color" content="#667eea">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://lledellebell.github.io/peek-carousel/examples/example-built.html">
+  <meta property="og:title" content="PeekCarousel - iPhone 17 Pro inspired carousel library">
+  <meta property="og:description" content="A modular carousel library with 3 layout modes (Stack/Card, Radial, Classic) featuring peek effect, touch/drag support, and full accessibility.">
+  <meta property="og:image" content="https://lledellebell.github.io/peek-carousel/public/assets/share_image.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="PeekCarousel Demo - Interactive carousel with peek effect">
+  <meta property="og:site_name" content="PeekCarousel">
+  <meta property="og:locale" content="ko_KR">
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://lledellebell.github.io/peek-carousel/examples/example-built.html">
+  <meta property="twitter:title" content="PeekCarousel - iPhone 17 Pro inspired carousel library">
+  <meta property="twitter:description" content="A modular carousel library with 3 layout modes (Stack/Card, Radial, Classic) featuring peek effect, touch/drag support, and full accessibility.">
+  <meta property="twitter:image" content="https://lledellebell.github.io/peek-carousel/public/assets/share_image.png">
+  <meta property="twitter:image:alt" content="PeekCarousel Demo - Interactive carousel with peek effect">
+  <link rel="canonical" href="https://lledellebell.github.io/peek-carousel/examples/example-built.html">
+  <link rel="icon" type="image/png" sizes="32x32" href="../public/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../public/favicon-16x16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="../public/apple-touch-icon.png">
+  <link rel="stylesheet" href="../dist/peek-carousel.min.css">
+  <link rel="stylesheet" href="./example.min.css">
+</head>
+<body>
+  <div class="wrapper">
+    <a href="https://github.com/lledellebell/peek-carousel" class="github__link circle__button" target="_blank" rel="noopener noreferrer" aria-label="View source on GitHub" data-tooltip="View on GitHub">
+      <svg width="32" height="32" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+      </svg>
+      <span class="tooltip">View on GitHub</span>
+    </a>
+    <header class="intro__text">
+      <h1>PeekCarousel</h1>
+      <p>스와이프 또는 드래그로 이동하세요</p>
+    </header>
+    <div class="top__controls">
+      <button class="keyboard__toggle circle__button" aria-label="Toggle keyboard shortcuts panel" aria-expanded="false" data-tooltip="Keyboard Shortcuts">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="2" y="4" width="20" height="16" rx="2"/>
+          <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01M7 16h10"/>
+        </svg>
+        <span class="tooltip">키보드 단축키</span>
+      </button>
+      <button class="mouse__toggle circle__button" aria-label="Toggle mouse and wheel panel" aria-expanded="false" data-tooltip="Mouse & Wheel">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2C8.5 2 6 4.5 6 8v8c0 3.5 2.5 6 6 6s6-2.5 6-6V8c0-3.5-2.5-6-6-6z"/>
+          <path d="M12 6v4"/>
+        </svg>
+        <span class="tooltip">마우스 & 휠</span>
+      </button>
+      <button class="controls__toggle circle__button" aria-label="Toggle settings panel" aria-expanded="false" data-tooltip="Settings">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+          <circle cx="12" cy="12" r="3"/>
+        </svg>
+        <span class="tooltip">설정</span>
+      </button>
+      <button class="share__toggle circle__button" aria-label="Toggle share panel" aria-expanded="false" data-tooltip="Share">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="18" cy="5" r="3"/>
+          <circle cx="6" cy="12" r="3"/>
+          <circle cx="18" cy="19" r="3"/>
+          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
+          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+        </svg>
+        <span class="tooltip">공유하기</span>
+      </button>
+    </div>
+    <div class="keyboard__panel">
+      <div class="keyboard__header">
+        <h3>키보드 단축키</h3>
+      </div>
+      <div class="keyboard__shortcuts">
+        <div class="shortcut__item">
+          <kbd class="shortcut__key">←</kbd>
+          <span class="shortcut__description">이전 슬라이드</span>
+        </div>
+        <div class="shortcut__item">
+          <kbd class="shortcut__key">→</kbd>
+          <span class="shortcut__description">다음 슬라이드</span>
+        </div>
+        <div class="shortcut__item">
+          <kbd class="shortcut__key">Home</kbd>
+          <span class="shortcut__description">첫 번째 슬라이드</span>
+        </div>
+        <div class="shortcut__item">
+          <kbd class="shortcut__key">End</kbd>
+          <span class="shortcut__description">마지막 슬라이드</span>
+        </div>
+        <div class="shortcut__item">
+          <kbd class="shortcut__key shortcut__key--range">1 - 9</kbd>
+          <span class="shortcut__description">슬라이드 번호로 이동</span>
+        </div>
+        <div class="shortcut__item">
+          <kbd class="shortcut__key">Space</kbd>
+          <span class="shortcut__description">자동 회전 토글</span>
+        </div>
+      </div>
+    </div>
+    <div class="mouse__panel">
+      <div class="mouse__header">
+        <h3>마우스 & 휠</h3>
+      </div>
+      <div class="mouse__controls">
+        <div class="control__item">
+          <div class="control__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2C8.5 2 6 4.5 6 8v8c0 3.5 2.5 6 6 6s6-2.5 6-6V8c0-3.5-2.5-6-6-6z"/>
+              <path d="M12 6v4"/>
+            </svg>
+          </div>
+          <div class="control__content">
+            <span class="control__title">마우스 휠 (수직)</span>
+            <span class="control__description">위/아래 스크롤로 슬라이드 이동</span>
+          </div>
+        </div>
+        <div class="control__item">
+          <div class="control__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="5" width="18" height="14" rx="2"/>
+              <path d="M8 12h8M12 8v8"/>
+            </svg>
+          </div>
+          <div class="control__content">
+            <span class="control__title">트랙패드 (수직)</span>
+            <span class="control__description">두 손가락 상하 스크롤</span>
+          </div>
+        </div>
+        <div class="control__item">
+          <div class="control__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="5" width="18" height="14" rx="2"/>
+              <path d="M8 12h8"/>
+            </svg>
+          </div>
+          <div class="control__content">
+            <span class="control__title">트랙패드 (수평)</span>
+            <span class="control__description">두 손가락 좌우 스와이프</span>
+          </div>
+        </div>
+        <div class="control__item">
+          <div class="control__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 5v14M5 12h14"/>
+            </svg>
+          </div>
+          <div class="control__content">
+            <span class="control__title">마우스 드래그</span>
+            <span class="control__description">클릭 후 좌우로 드래그하여 이동</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="controls__panel">
+      <div class="controls__header">
+        <h3>설정</h3>
+      </div>
+      <!-- 레이아웃 모드 버튼 그룹 -->
+      <div class="control__section">
+        <label class="section__label">레이아웃 모드</label>
+        <div class="button__group" role="group" aria-label="Layout mode selection">
+          <button class="button__group-item button__group-item--active" data-layout="stack" aria-pressed="true">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="7" height="7"/>
+              <rect x="3" y="14" width="7" height="7"/>
+              <rect x="14" y="3" width="7" height="7"/>
+              <rect x="14" y="14" width="7" height="7"/>
+            </svg>
+            스택
+          </button>
+          <button class="button__group-item" data-layout="radial" aria-pressed="false">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <circle cx="12" cy="12" r="6"/>
+              <circle cx="12" cy="12" r="2"/>
+            </svg>
+            원형
+          </button>
+          <button class="button__group-item" data-layout="classic" aria-pressed="false">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="7" width="20" height="10" rx="2"/>
+              <line x1="7" y1="12" x2="17" y2="12"/>
+            </svg>
+            클래식
+          </button>
+        </div>
+      </div>
+      <!-- UI 토글 스위치 -->
+      <div class="control__section">
+        <label class="section__label">UI 요소</label>
+        <div class="switch__group">
+          <label class="switch__item">
+            <span class="switch__label">네비게이션</span>
+            <input type="checkbox" id="showNavigation" checked>
+            <span class="switch__slider"></span>
+          </label>
+          <label class="switch__item">
+            <span class="switch__label">카운터</span>
+            <input type="checkbox" id="showCounter" checked>
+            <span class="switch__slider"></span>
+          </label>
+          <label class="switch__item">
+            <span class="switch__label">인디케이터</span>
+            <input type="checkbox" id="showIndicators" checked>
+            <span class="switch__slider"></span>
+          </label>
+          <label class="switch__item">
+            <span class="switch__label">자동 회전</span>
+            <input type="checkbox" id="showAutoRotateButton" checked>
+            <span class="switch__slider"></span>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="share__panel">
+      <div class="share__header">
+        <h3>공유하기</h3>
+      </div>
+      <div class="share__buttons">
+        <a href="https://twitter.com/intent/tweet?url=https://lledellebell.github.io/peek-carousel/examples/example-built.html&text=PeekCarousel - iPhone 17 Pro inspired carousel library"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="share__item share__item--twitter">
+          <div class="share__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+            </svg>
+          </div>
+          <div class="share__content">
+            <span class="share__title">Twitter</span>
+            <span class="share__description">트위터에 공유하기</span>
+          </div>
+        </a>
+        <a href="https://www.facebook.com/sharer/sharer.php?u=https://lledellebell.github.io/peek-carousel/examples/example-built.html"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="share__item share__item--facebook">
+          <div class="share__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+          </div>
+          <div class="share__content">
+            <span class="share__title">Facebook</span>
+            <span class="share__description">페이스북에 공유하기</span>
+          </div>
+        </a>
+        <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://lledellebell.github.io/peek-carousel/examples/example-built.html"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="share__item share__item--linkedin">
+          <div class="share__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+            </svg>
+          </div>
+          <div class="share__content">
+            <span class="share__title">LinkedIn</span>
+            <span class="share__description">링크드인에 공유하기</span>
+          </div>
+        </a>
+        <a href="https://www.reddit.com/submit?url=https://lledellebell.github.io/peek-carousel/examples/example-built.html&title=PeekCarousel - iPhone 17 Pro inspired carousel library"
+           target="_blank"
+           rel="noopener noreferrer"
+           class="share__item share__item--reddit">
+          <div class="share__icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
+            </svg>
+          </div>
+          <div class="share__content">
+            <span class="share__title">Reddit</span>
+            <span class="share__description">레딧에 공유하기</span>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div class="peek-carousel" id="myCarousel">
+      <div class="peek-carousel__track">
+        <div class="peek-carousel__item">
+          <figure class="peek-carousel__figure">
+            <img class="peek-carousel__image" src="https://picsum.photos/id/1015/650/490.webp" alt="Image 1" width="650" height="490" />
+            <figcaption class="peek-carousel__caption">
+              <span class="peek-carousel__caption-title">Image 1</span>
+              <span class="peek-carousel__caption-subtitle">Beautiful landscape</span>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="peek-carousel__item">
+          <figure class="peek-carousel__figure">
+            <img class="peek-carousel__image" src="https://picsum.photos/id/1018/650/490.webp" alt="Image 2" width="650" height="490" />
+            <figcaption class="peek-carousel__caption">
+              <span class="peek-carousel__caption-title">Image 2</span>
+              <span class="peek-carousel__caption-subtitle">Mountain view</span>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="peek-carousel__item">
+          <figure class="peek-carousel__figure">
+            <img class="peek-carousel__image" src="https://picsum.photos/id/1019/650/490.webp" alt="Image 3" width="650" height="490" />
+            <figcaption class="peek-carousel__caption">
+              <span class="peek-carousel__caption-title">Image 3</span>
+              <span class="peek-carousel__caption-subtitle">Ocean waves</span>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="peek-carousel__item">
+          <figure class="peek-carousel__figure">
+            <img class="peek-carousel__image" src="https://picsum.photos/id/1025/650/490.webp" alt="Image 4" width="650" height="490" />
+            <figcaption class="peek-carousel__caption">
+              <span class="peek-carousel__caption-title">Image 4</span>
+              <span class="peek-carousel__caption-subtitle">Forest path</span>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="peek-carousel__item">
+          <figure class="peek-carousel__figure">
+            <img class="peek-carousel__image" src="https://picsum.photos/id/1035/650/490.webp" alt="Image 5" width="650" height="490" />
+            <figcaption class="peek-carousel__caption">
+              <span class="peek-carousel__caption-title">Image 5</span>
+              <span class="peek-carousel__caption-subtitle">City lights</span>
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="../dist/peek-carousel.min.js"></script>
+  <script src="./example.min.js"></script>
+</body>
+</html>