peek-carousel 1.0.2

package/dist/peek-carousel.esm.js

@@ -0,0 +1,1368 @@
+/**
+ * PeekCarousel - Peek 효과를 가진 캐러셀
+ * @version 1.0.0
+ * @license MIT
+ * @author lledellebell
+ */
+const LAYOUT_MODES = Object.freeze({
+  STACK: 'stack',
+  RADIAL: 'radial',
+  CLASSIC: 'classic'
+});
+const DEFAULT_OPTIONS = Object.freeze({
+  startIndex: 1,
+  layoutMode: LAYOUT_MODES.STACK,
+  autoRotate: false,
+  autoRotateInterval: 2500,
+  preloadRange: 2,
+  swipeThreshold: 50,
+  dragThreshold: 80,
+  enableKeyboard: true,
+  enableWheel: true,
+  enableTouch: true,
+  enableMouse: true,
+  showNavigation: true,
+  showCounter: true,
+  showIndicators: true,
+  showAutoRotateButton: true
+});
+function validateOptions(options) {
+  const validated = {
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  if (validated.startIndex < 0) {
+    console.warn('PeekCarousel: startIndex는 0 이상이어야 합니다. 기본값 1 사용');
+    validated.startIndex = 1;
+  }
+  if (!Object.values(LAYOUT_MODES).includes(validated.layoutMode)) {
+    console.warn(`PeekCarousel: 유효하지 않은 layoutMode "${validated.layoutMode}". 기본값 "stack" 사용`);
+    validated.layoutMode = LAYOUT_MODES.STACK;
+  }
+  if (validated.autoRotateInterval < 100) {
+    console.warn('PeekCarousel: autoRotateInterval은 100ms 이상이어야 합니다. 기본값 2500 사용');
+    validated.autoRotateInterval = 2500;
+  }
+  if (validated.preloadRange < 0) {
+    console.warn('PeekCarousel: preloadRange는 0 이상이어야 합니다. 기본값 2 사용');
+    validated.preloadRange = 2;
+  }
+  return validated;
+}
+
+const CLASS_NAMES = Object.freeze({
+  carousel: 'peek-carousel',
+  track: 'peek-carousel__track',
+  item: 'peek-carousel__item',
+  itemActive: 'peek-carousel__item--active',
+  itemPrev: 'peek-carousel__item--prev',
+  itemNext: 'peek-carousel__item--next',
+  itemCenter: 'peek-carousel__item--center',
+  itemHidden: 'peek-carousel__item--hidden',
+  itemDraggingLeft: 'peek-carousel__item--dragging-left',
+  itemDraggingRight: 'peek-carousel__item--dragging-right',
+  figure: 'peek-carousel__figure',
+  image: 'peek-carousel__image',
+  caption: 'peek-carousel__caption',
+  nav: 'peek-carousel__nav',
+  navBtn: 'nav-btn',
+  btn: 'peek-carousel__btn',
+  prevBtn: 'prev-btn',
+  nextBtn: 'next-btn',
+  autoRotateBtn: 'auto-rotate-btn',
+  btnAutoRotate: 'peek-carousel__btn--auto-rotate',
+  btnActive: 'peek-carousel__btn--active',
+  controls: 'peek-carousel__controls',
+  indicators: 'peek-carousel__indicators',
+  indicator: 'indicator',
+  indicatorPeek: 'peek-carousel__indicator',
+  indicatorActive: 'peek-carousel__indicator--active',
+  indicatorProgress: 'peek-carousel__indicator--progress',
+  indicatorCompleted: 'peek-carousel__indicator--completed',
+  counter: 'peek-carousel__counter',
+  counterCurrent: 'peek-carousel__counter-current',
+  counterSeparator: 'peek-carousel__counter-separator',
+  counterTotal: 'peek-carousel__counter-total',
+  playIcon: 'play-icon',
+  pauseIcon: 'pause-icon'
+});
+const SELECTORS = Object.freeze({
+  carousel: '.peek-carousel__track',
+  item: '.peek-carousel__item',
+  indicator: '.indicator',
+  prevBtn: '.prev-btn',
+  nextBtn: '.next-btn',
+  autoRotateBtn: '.auto-rotate-btn',
+  playIcon: '.play-icon',
+  pauseIcon: '.pause-icon',
+  image: 'img'
+});
+const ARIA = Object.freeze({
+  current: 'aria-current',
+  selected: 'aria-selected',
+  pressed: 'aria-pressed',
+  label: 'aria-label',
+  tabindex: 'tabindex'
+});
+const BREAKPOINTS = Object.freeze({
+  mobile: 768 // [개발참고] px
+});
+const DURATIONS = Object.freeze({
+  transition: 500,
+  // [개발참고] ms
+  progressReset: 10 // [개발참고] ms
+});
+const KEYS = Object.freeze({
+  arrowLeft: 'ArrowLeft',
+  arrowRight: 'ArrowRight',
+  home: 'Home',
+  end: 'End',
+  space: ' '
+});
+
+function getElement(selector) {
+  if (typeof selector === 'string') {
+    return document.querySelector(selector);
+  }
+  return selector instanceof HTMLElement ? selector : null;
+}
+function getElements(selector, parent = document) {
+  if (typeof selector !== 'string') return [];
+  return Array.from(parent.querySelectorAll(selector));
+}
+function addClass(element, ...classes) {
+  if (element instanceof HTMLElement && classes.length > 0) {
+    element.classList.add(...classes);
+  }
+}
+function removeClass(element, ...classes) {
+  if (element instanceof HTMLElement && classes.length > 0) {
+    element.classList.remove(...classes);
+  }
+}
+function setCSSVar(element, property, value) {
+  if (element instanceof HTMLElement && property) {
+    element.style.setProperty(property, value);
+  }
+}
+function setAttribute(element, name, value) {
+  if (element instanceof HTMLElement && name) {
+    element.setAttribute(name, value);
+  }
+}
+
+const loadingCache = new Map();
+function preloadImage(src) {
+  return new Promise((resolve, reject) => {
+    if (!src) {
+      reject(new Error('이미지 소스가 제공되지 않았습니다'));
+      return;
+    }
+    if (loadingCache.has(src)) {
+      return loadingCache.get(src);
+    }
+    const img = new Image();
+    const promise = new Promise((res, rej) => {
+      img.onload = () => {
+        loadingCache.delete(src);
+        res(img);
+      };
+      img.onerror = () => {
+        loadingCache.delete(src);
+        rej(new Error(`이미지 로드 실패: ${src}`));
+      };
+      img.src = src;
+    });
+    loadingCache.set(src, promise);
+    promise.then(resolve, reject);
+  });
+}
+function preloadImages(sources) {
+  if (!sources || sources.length === 0) {
+    return Promise.resolve([]);
+  }
+  const uniqueSources = [...new Set(sources)];
+  return Promise.all(uniqueSources.map(src => preloadImage(src)));
+}
+function preloadImagesInRange(items, currentIndex, range) {
+  if (!items || items.length === 0 || range < 0) {
+    return;
+  }
+  const totalItems = items.length;
+  const imagesToPreload = new Set();
+  for (let distance = 1; distance <= range; distance++) {
+    const prevIndex = (currentIndex - distance + totalItems) % totalItems;
+    const nextIndex = (currentIndex + distance) % totalItems;
+    const prevImg = items[prevIndex]?.querySelector('img');
+    const nextImg = items[nextIndex]?.querySelector('img');
+    if (prevImg && prevImg.src && !prevImg.complete) {
+      imagesToPreload.add(prevImg.src);
+    }
+    if (nextImg && nextImg.src && !nextImg.complete) {
+      imagesToPreload.add(nextImg.src);
+    }
+  }
+  if (imagesToPreload.size > 0) {
+    preloadImages([...imagesToPreload]).catch(err => {
+      console.warn('일부 이미지 프리로드 실패:', err);
+    });
+  }
+}
+
+const iconCache = new Map();
+function createSVGIcon(path, options = {}) {
+  const {
+    width = 24,
+    height = 24,
+    viewBox = '0 0 24 24',
+    fill = 'none',
+    stroke = 'currentColor',
+    strokeWidth = 2,
+    strokeLinecap = 'round',
+    strokeLinejoin = 'round',
+    className = ''
+  } = options;
+  const cacheKey = `${path}-${JSON.stringify(options)}`;
+  if (iconCache.has(cacheKey)) {
+    return iconCache.get(cacheKey);
+  }
+  const svg = `<svg width="${width}" height="${height}" viewBox="${viewBox}" fill="${fill}" xmlns="http://www.w3.org/2000/svg" class="${className}"><path d="${path}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLinecap}" stroke-linejoin="${strokeLinejoin}"/></svg>`;
+  iconCache.set(cacheKey, svg);
+  return svg;
+}
+const ICONS = {
+  prev: {
+    path: 'M15 18L9 12L15 6',
+    options: {}
+  },
+  next: {
+    path: 'M9 18L15 12L9 6',
+    options: {}
+  },
+  play: {
+    path: 'M8 6.5v11l9-5.5z',
+    options: {
+      fill: 'currentColor',
+      stroke: 'currentColor',
+      strokeWidth: 0,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round'
+    }
+  },
+  pause: {
+    path: 'M7 5.5C7 5.22386 7.22386 5 7.5 5H9.5C9.77614 5 10 5.22386 10 5.5V18.5C10 18.7761 9.77614 19 9.5 19H7.5C7.22386 19 7 18.7761 7 18.5V5.5ZM14 5.5C14 5.22386 14.2239 5 14.5 5H16.5C16.7761 5 17 5.22386 17 5.5V18.5C17 18.7761 16.7761 19 16.5 19H14.5C14.2239 19 14 18.7761 14 18.5V5.5Z',
+    options: {
+      fill: 'currentColor',
+      stroke: 'none'
+    }
+  }
+};
+function getIcon(iconName, customOptions = {}) {
+  const icon = ICONS[iconName];
+  if (!icon) {
+    console.warn(`PeekCarousel: 아이콘 "${iconName}"을 찾을 수 없습니다`);
+    return '';
+  }
+  const options = {
+    ...icon.options,
+    ...customOptions
+  };
+  return createSVGIcon(icon.path, options);
+}
+function injectIcon(button, iconName, options = {}) {
+  if (!button || !(button instanceof HTMLElement)) return;
+  if (button.querySelector('svg')) {
+    return;
+  }
+  const iconHTML = getIcon(iconName, options);
+  if (iconHTML) {
+    button.innerHTML = iconHTML;
+  }
+}
+function injectAutoRotateIcons(button) {
+  if (!button || !(button instanceof HTMLElement)) return;
+  if (button.querySelector('svg')) {
+    return;
+  }
+  const playHTML = getIcon('play', {
+    className: 'play-icon'
+  });
+  const pauseHTML = getIcon('pause', {
+    className: 'pause-icon'
+  });
+  if (playHTML && pauseHTML) {
+    button.innerHTML = playHTML + pauseHTML;
+  }
+}
+
+function isMobile() {
+  return window.innerWidth <= 768;
+}
+function normalizeIndex(index, length) {
+  if (length <= 0) return 0;
+  return (index % length + length) % length;
+}
+
+const PROXIMITY_THRESHOLD = 2;
+class Navigator {
+  constructor(carousel) {
+    this.carousel = carousel;
+  }
+  get currentIndex() {
+    return this.carousel.state.currentIndex;
+  }
+  set currentIndex(value) {
+    this.carousel.state.currentIndex = normalizeIndex(value, this.carousel.totalItems);
+  }
+  getShortestDistance(from, to) {
+    const total = this.carousel.totalItems;
+    const normalizedTo = normalizeIndex(to, total);
+    const normalizedFrom = normalizeIndex(from, total);
+    const forwardDist = (normalizedTo - normalizedFrom + total) % total;
+    const backwardDist = (normalizedFrom - normalizedTo + total) % total;
+    return forwardDist <= backwardDist ? forwardDist : -backwardDist;
+  }
+  isNearby(from, to) {
+    const distance = Math.abs(this.getShortestDistance(from, to));
+    return distance <= PROXIMITY_THRESHOLD;
+  }
+  updateAfterNavigation() {
+    this.carousel.animator.updateCarousel();
+    this.carousel.updateCounter();
+    if (this.carousel.options.preloadRange > 0) {
+      this.carousel.preloadImages();
+    }
+  }
+  rotate(direction) {
+    this.currentIndex = this.currentIndex + direction;
+    this.updateAfterNavigation();
+  }
+  next() {
+    this.rotate(1);
+  }
+  prev() {
+    this.rotate(-1);
+  }
+  goTo(index) {
+    const normalizedIndex = normalizeIndex(index, this.carousel.totalItems);
+    if (normalizedIndex === this.currentIndex) return;
+    this.currentIndex = normalizedIndex;
+    this.updateAfterNavigation();
+  }
+  navigateIfDifferent(targetIndex, callback) {
+    const normalizedIndex = normalizeIndex(targetIndex, this.carousel.totalItems);
+    if (normalizedIndex === this.currentIndex) return false;
+    callback(normalizedIndex);
+    return true;
+  }
+  handleItemClick(index) {
+    this.navigateIfDifferent(index, normalizedIndex => {
+      const {
+        layoutMode
+      } = this.carousel.options;
+      if (layoutMode === 'radial') {
+        this.handleRadialItemClick(normalizedIndex);
+      } else {
+        this.handleStackItemClick(normalizedIndex);
+      }
+    });
+  }
+  handleRadialItemClick(normalizedIndex) {
+    const shortestDist = this.getShortestDistance(this.currentIndex, normalizedIndex);
+    if (Math.abs(shortestDist) > 1) {
+      const direction = shortestDist > 0 ? 1 : -1;
+      this.rotate(direction);
+    } else {
+      this.rotate(shortestDist);
+    }
+  }
+  handleStackItemClick(normalizedIndex) {
+    if (this.isNearby(this.currentIndex, normalizedIndex)) {
+      const shortestDist = this.getShortestDistance(this.currentIndex, normalizedIndex);
+      this.rotate(shortestDist);
+    } else {
+      this.goTo(normalizedIndex);
+    }
+  }
+  handleIndicatorClick(index) {
+    this.navigateIfDifferent(index, normalizedIndex => {
+      const {
+        layoutMode
+      } = this.carousel.options;
+      if (layoutMode === 'radial') {
+        const shortestDist = this.getShortestDistance(this.currentIndex, normalizedIndex);
+        this.rotate(shortestDist);
+      } else {
+        this.goTo(normalizedIndex);
+      }
+    });
+  }
+}
+
+const RADIAL_RADIUS = 400;
+const CLASSIC_POSITIONS = Object.freeze({
+  center: {
+    x: 50,
+    scale: 1
+  },
+  peek: {
+    scale: 1
+  },
+  hidden: {
+    scale: 0.85
+  }
+});
+const CLASSIC_SPACING = Object.freeze({
+  gapPercent: 5,
+  additionalMobile: 40,
+  additionalDesktop: 15,
+  mobileBreakpoint: 768
+});
+const MOMENTUM_CONFIG = Object.freeze({
+  friction: 0.92,
+  minVelocity: 0.05,
+  navigationThreshold: 1.5,
+  dampingFactor: 0.6
+});
+const STACK_POSITION_CLASSES = [CLASS_NAMES.itemCenter, CLASS_NAMES.itemPrev, CLASS_NAMES.itemNext, CLASS_NAMES.itemHidden];
+class Animator {
+  constructor(carousel) {
+    this.carousel = carousel;
+    this.momentumAnimation = null;
+    this.isAnimating = false;
+  }
+  normalizeAngleDiff(diff) {
+    return (diff + 180) % 360 - 180;
+  }
+  round(value, decimals = 2) {
+    return Math.round(value * 10 ** decimals) / 10 ** decimals;
+  }
+  getAdjacentIndices(currentIndex) {
+    return {
+      prev: normalizeIndex(currentIndex - 1, this.carousel.totalItems),
+      next: normalizeIndex(currentIndex + 1, this.carousel.totalItems)
+    };
+  }
+  setCarouselRotation(angle) {
+    const rounded = this.round(angle, 2);
+    this.carousel.container.style.setProperty('--carousel-rotation', `${rounded}deg`);
+  }
+  setCSSVariables(element, variables) {
+    for (const [key, value] of Object.entries(variables)) {
+      element.style.setProperty(key, value);
+    }
+  }
+  updateRadialRotation(currentIndex) {
+    const targetAngle = -this.carousel.state.angleUnit * currentIndex;
+    const currentRotation = this.carousel.container.style.getPropertyValue('--carousel-rotation');
+    if (!currentRotation || currentRotation === '0deg') {
+      this.setCarouselRotation(targetAngle);
+      return;
+    }
+
+    // [개발참고] 최단 경로 계산: -180 ~ 180 범위로 정규화
+    const currentAngle = parseFloat(currentRotation);
+    const diff = this.normalizeAngleDiff(targetAngle - currentAngle);
+    const finalAngle = currentAngle + diff;
+    this.setCarouselRotation(finalAngle);
+  }
+  updateCarousel() {
+    const {
+      currentIndex
+    } = this.carousel.state;
+    const {
+      layoutMode
+    } = this.carousel.options;
+    if (layoutMode === 'stack' || layoutMode === 'classic') {
+      this.setCarouselRotation(0);
+    } else if (layoutMode === 'radial') {
+      this.updateRadialRotation(currentIndex);
+    }
+    this.updateActiveItem();
+  }
+  updateActiveItem() {
+    const {
+      currentIndex
+    } = this.carousel.state;
+    const {
+      layoutMode
+    } = this.carousel.options;
+    this.carousel.ui.updateActiveStates(currentIndex);
+    if (layoutMode === 'radial') {
+      this.updateRadialPositions(currentIndex);
+    } else if (layoutMode === 'classic') {
+      this.updateClassicPositions(currentIndex);
+    } else {
+      this.updateStackPositions(currentIndex);
+    }
+  }
+  updateRadialPositions(currentIndex) {
+    const {
+      angleUnit
+    } = this.carousel.state;
+    for (let i = 0; i < this.carousel.items.length; i++) {
+      const item = this.carousel.items[i];
+      const angle = angleUnit * i;
+      this.setCSSVariables(item, {
+        '--item-angle': `${this.round(angle, 2)}deg`,
+        '--item-radius': `${RADIAL_RADIUS}px`
+      });
+    }
+    const {
+      prev,
+      next
+    } = this.getAdjacentIndices(currentIndex);
+    this.carousel.ui.setPeekItems(prev, next);
+  }
+  updateStackPositions(currentIndex) {
+    const {
+      prev,
+      next
+    } = this.getAdjacentIndices(currentIndex);
+    for (let i = 0; i < this.carousel.items.length; i++) {
+      const item = this.carousel.items[i];
+      item.classList.remove(...STACK_POSITION_CLASSES);
+      if (i === currentIndex) {
+        item.classList.add(CLASS_NAMES.itemCenter);
+      } else if (i === prev) {
+        item.classList.add(CLASS_NAMES.itemPrev);
+      } else if (i === next) {
+        item.classList.add(CLASS_NAMES.itemNext);
+      } else {
+        item.classList.add(CLASS_NAMES.itemHidden);
+      }
+    }
+  }
+  calculateClassicSpacing(containerWidth) {
+    const itemWidth = Math.max(300, Math.min(containerWidth * 0.35, 500));
+    const isMobile = containerWidth <= CLASSIC_SPACING.mobileBreakpoint;
+    const itemHalfPercent = itemWidth / containerWidth * 50;
+    const baseSpacing = itemHalfPercent + CLASSIC_SPACING.gapPercent;
+    const additionalSpacing = isMobile ? CLASSIC_SPACING.additionalMobile : CLASSIC_SPACING.additionalDesktop;
+    return baseSpacing + additionalSpacing;
+  }
+  getClassicItemPosition(itemIndex, currentIndex, itemSpacing) {
+    const {
+      prev,
+      next
+    } = this.getAdjacentIndices(currentIndex);
+    if (itemIndex === currentIndex) {
+      return {
+        x: CLASSIC_POSITIONS.center.x,
+        scale: CLASSIC_POSITIONS.center.scale
+      };
+    }
+    if (itemIndex === prev) {
+      return {
+        x: CLASSIC_POSITIONS.center.x - itemSpacing,
+        scale: CLASSIC_POSITIONS.peek.scale
+      };
+    }
+    if (itemIndex === next) {
+      return {
+        x: CLASSIC_POSITIONS.center.x + itemSpacing,
+        scale: CLASSIC_POSITIONS.peek.scale
+      };
+    }
+    const distanceFromCurrent = itemIndex - currentIndex;
+    return {
+      x: distanceFromCurrent < 0 ? CLASSIC_POSITIONS.center.x - itemSpacing * 2 : CLASSIC_POSITIONS.center.x + itemSpacing * 2,
+      scale: CLASSIC_POSITIONS.hidden.scale
+    };
+  }
+  updateClassicPositions(currentIndex) {
+    const {
+      prev,
+      next
+    } = this.getAdjacentIndices(currentIndex);
+    const containerWidth = this.carousel.container.offsetWidth;
+    const itemSpacing = this.calculateClassicSpacing(containerWidth);
+    for (let i = 0; i < this.carousel.items.length; i++) {
+      const item = this.carousel.items[i];
+      const {
+        x,
+        scale
+      } = this.getClassicItemPosition(i, currentIndex, itemSpacing);
+      this.setCSSVariables(item, {
+        '--item-x': `${this.round(x, 2)}%`,
+        '--item-scale': String(scale)
+      });
+    }
+    this.carousel.ui.setPeekItems(prev, next);
+  }
+  startMomentum(velocity) {
+    this.stopMomentum();
+    let currentVelocity = velocity;
+    const momentumStep = () => {
+      currentVelocity *= MOMENTUM_CONFIG.friction;
+      if (Math.abs(currentVelocity) < MOMENTUM_CONFIG.minVelocity) {
+        this.stopMomentum();
+        return;
+      }
+      if (Math.abs(currentVelocity) > MOMENTUM_CONFIG.navigationThreshold) {
+        const direction = currentVelocity > 0 ? -1 : 1;
+        this.carousel.navigator.rotate(direction);
+        currentVelocity *= MOMENTUM_CONFIG.dampingFactor;
+      }
+      this.momentumAnimation = requestAnimationFrame(momentumStep);
+    };
+    this.isAnimating = true;
+    this.momentumAnimation = requestAnimationFrame(momentumStep);
+  }
+  stopMomentum() {
+    if (this.momentumAnimation) {
+      cancelAnimationFrame(this.momentumAnimation);
+      this.momentumAnimation = null;
+    }
+    this.isAnimating = false;
+  }
+}
+
+class AutoRotate {
+  constructor(carousel) {
+    this.carousel = carousel;
+    this.interval = null;
+    this.isActive = false;
+  }
+  setActiveState(isActive) {
+    this.isActive = isActive;
+    this.carousel.ui.updateAutoRotateButton(isActive);
+  }
+  toggle() {
+    this.isActive ? this.stop() : this.start();
+  }
+  start() {
+    if (this.isActive) return;
+    this.setActiveState(true);
+    const rotateInterval = this.carousel.options.autoRotateInterval;
+    this.interval = setInterval(() => {
+      this.carousel.navigator.next();
+    }, rotateInterval);
+  }
+  stop() {
+    if (!this.isActive) return;
+    this.setActiveState(false);
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+  destroy() {
+    this.stop();
+    this.carousel = null;
+  }
+}
+
+const WHEEL_CONFIG = Object.freeze({
+  threshold: 50,
+  timeout: 150,
+  cooldown: 100
+});
+const DRAG_CONFIG = Object.freeze({
+  touchThreshold: 15,
+  mouseThreshold: 10,
+  velocityThreshold: 0.5
+});
+const RESIZE_DEBOUNCE = 100;
+class EventHandler {
+  constructor(carousel) {
+    this.carousel = carousel;
+    this.boundHandlers = new Map();
+    this.touch = {
+      startX: 0,
+      endX: 0
+    };
+    this.drag = {
+      active: false,
+      startX: 0,
+      currentX: 0,
+      lastX: 0,
+      lastTime: 0,
+      velocity: 0
+    };
+    this.wheel = {
+      isScrolling: false,
+      scrollTimeout: null,
+      lastWheelTime: 0,
+      accumulatedDelta: 0
+    };
+  }
+  init() {
+    this.initNavigationButtons();
+    this.initKeyboard();
+    this.initWheel();
+    this.initItemClick();
+    this.initIndicatorClick();
+    this.initTouch();
+    this.initMouse();
+    this.initResize();
+  }
+  stopAutoRotateAndNavigate(navigationFn) {
+    this.completeCurrentIndicator();
+    this.carousel.autoRotate.stop();
+    navigationFn();
+  }
+  completeCurrentIndicator() {
+    const currentIndicator = this.carousel.indicators[this.carousel.state.currentIndex];
+    if (currentIndicator && currentIndicator.classList.contains('peek-carousel__indicator--active')) {
+      currentIndicator.classList.add('peek-carousel__indicator--completed');
+    }
+  }
+  resetDragState(index) {
+    this.carousel.ui.removeDraggingClass(index);
+    this.carousel.ui.clearDragTransform();
+  }
+  updateDraggingClass(dragDistance, currentIndex, threshold) {
+    if (dragDistance > threshold) {
+      this.carousel.ui.addDraggingClass(currentIndex, 'right');
+    } else if (dragDistance < -threshold) {
+      this.carousel.ui.addDraggingClass(currentIndex, 'left');
+    }
+  }
+  initDragState(clientX) {
+    this.drag.active = true;
+    this.drag.startX = clientX;
+    this.drag.currentX = clientX;
+    this.drag.lastX = clientX;
+    this.drag.lastTime = Date.now();
+    this.drag.velocity = 0;
+  }
+  resetMouseCursor() {
+    this.carousel.elements.carousel.style.cursor = 'grab';
+  }
+  calculateWheelDelta(e) {
+    const deltaX = Math.abs(e.deltaX);
+    const deltaY = Math.abs(e.deltaY);
+    const isHorizontal = deltaX > deltaY;
+
+    // [개발참고] 수평: 왼쪽(-) = 다음, 오른쪽(+) = 이전
+    //            수직: 아래(+) = 다음, 위(-) = 이전
+    return isHorizontal ? -e.deltaX : e.deltaY;
+  }
+  resetWheelState() {
+    this.wheel.isScrolling = false;
+    this.wheel.accumulatedDelta = 0;
+  }
+  initNavigationButtons() {
+    const {
+      prevBtn,
+      nextBtn,
+      autoRotateBtn
+    } = this.carousel.elements;
+    if (prevBtn) {
+      this.addHandler(prevBtn, 'click', () => {
+        this.stopAutoRotateAndNavigate(() => this.carousel.navigator.prev());
+      });
+    }
+    if (nextBtn) {
+      this.addHandler(nextBtn, 'click', () => {
+        this.stopAutoRotateAndNavigate(() => this.carousel.navigator.next());
+      });
+    }
+    if (autoRotateBtn) {
+      this.addHandler(autoRotateBtn, 'click', () => {
+        this.carousel.autoRotate.toggle();
+      });
+    }
+  }
+  initKeyboard() {
+    if (!this.carousel.options.enableKeyboard) return;
+    const handler = e => {
+      const {
+        navigator,
+        autoRotate,
+        totalItems
+      } = this.carousel;
+      switch (e.key) {
+        case KEYS.arrowLeft:
+          autoRotate.stop();
+          navigator.prev();
+          break;
+        case KEYS.arrowRight:
+          autoRotate.stop();
+          navigator.next();
+          break;
+        case KEYS.home:
+          e.preventDefault();
+          autoRotate.stop();
+          navigator.goTo(0);
+          break;
+        case KEYS.end:
+          e.preventDefault();
+          autoRotate.stop();
+          navigator.goTo(totalItems - 1);
+          break;
+        case KEYS.space:
+          e.preventDefault();
+          autoRotate.toggle();
+          break;
+        default:
+          const numKey = parseInt(e.key);
+          if (numKey >= 1 && numKey <= totalItems) {
+            e.preventDefault();
+            autoRotate.stop();
+            navigator.goTo(numKey - 1);
+          }
+      }
+    };
+    this.addHandler(document, 'keydown', handler);
+  }
+  initWheel() {
+    if (!this.carousel.options.enableWheel) return;
+    const handler = e => {
+      const deltaX = Math.abs(e.deltaX);
+      const deltaY = Math.abs(e.deltaY);
+      if (deltaX < 1 && deltaY < 1) {
+        return;
+      }
+      if (deltaX === deltaY) {
+        return;
+      }
+      e.preventDefault();
+      const currentTime = Date.now();
+      if (currentTime - this.wheel.lastWheelTime < WHEEL_CONFIG.cooldown) {
+        return;
+      }
+      if (!this.wheel.isScrolling) {
+        this.wheel.isScrolling = true;
+        this.wheel.accumulatedDelta = 0;
+        this.carousel.autoRotate.stop();
+        this.carousel.animator.stopMomentum();
+      }
+      this.wheel.accumulatedDelta += this.calculateWheelDelta(e);
+      if (Math.abs(this.wheel.accumulatedDelta) >= WHEEL_CONFIG.threshold) {
+        const direction = this.wheel.accumulatedDelta > 0 ? 1 : -1;
+        this.carousel.navigator.rotate(direction);
+        this.wheel.accumulatedDelta = 0;
+        this.wheel.lastWheelTime = currentTime;
+      }
+      clearTimeout(this.wheel.scrollTimeout);
+      this.wheel.scrollTimeout = setTimeout(() => {
+        this.resetWheelState();
+      }, WHEEL_CONFIG.timeout);
+    };
+    this.addHandler(this.carousel.elements.carousel, 'wheel', handler, {
+      passive: false
+    });
+  }
+  initItemClick() {
+    const {
+      items
+    } = this.carousel;
+    for (let i = 0; i < items.length; i++) {
+      this.addHandler(items[i], 'click', () => {
+        this.carousel.autoRotate.stop();
+        this.carousel.navigator.handleItemClick(i);
+      });
+    }
+  }
+  initIndicatorClick() {
+    const {
+      indicators
+    } = this.carousel;
+    for (let i = 0; i < indicators.length; i++) {
+      this.addHandler(indicators[i], 'click', () => {
+        this.carousel.autoRotate.stop();
+        this.carousel.navigator.handleIndicatorClick(i);
+      });
+    }
+  }
+  initTouch() {
+    if (!this.carousel.options.enableTouch) return;
+    this.addHandler(this.carousel.elements.carousel, 'touchstart', e => {
+      this.touch.startX = e.changedTouches[0].screenX;
+    });
+    this.addHandler(this.carousel.elements.carousel, 'touchmove', e => {
+      const touchCurrentX = e.changedTouches[0].screenX;
+      const dragDistance = touchCurrentX - this.touch.startX;
+      const {
+        currentIndex
+      } = this.carousel.state;
+      this.carousel.ui.updateDragTransform(dragDistance);
+      this.updateDraggingClass(dragDistance, currentIndex, DRAG_CONFIG.touchThreshold);
+    });
+    this.addHandler(this.carousel.elements.carousel, 'touchend', e => {
+      this.touch.endX = e.changedTouches[0].screenX;
+      const swipeDistance = this.touch.endX - this.touch.startX;
+      const {
+        swipeThreshold
+      } = this.carousel.options;
+      const {
+        currentIndex
+      } = this.carousel.state;
+      this.resetDragState(currentIndex);
+      if (swipeDistance < -swipeThreshold) {
+        this.carousel.autoRotate.stop();
+        this.carousel.navigator.next();
+      } else if (swipeDistance > swipeThreshold) {
+        this.carousel.autoRotate.stop();
+        this.carousel.navigator.prev();
+      }
+    });
+  }
+  initMouse() {
+    if (!this.carousel.options.enableMouse) return;
+    this.addHandler(this.carousel.elements.carousel, 'mousedown', e => {
+      if (isMobile()) return;
+      this.initDragState(e.clientX);
+      this.carousel.autoRotate.stop();
+      this.carousel.animator.stopMomentum();
+      this.carousel.elements.carousel.style.cursor = 'grabbing';
+      e.preventDefault();
+    });
+    this.addHandler(document, 'mousemove', e => {
+      if (!this.drag.active) return;
+      const currentTime = Date.now();
+      const deltaTime = currentTime - this.drag.lastTime;
+      const deltaX = e.clientX - this.drag.lastX;
+      if (deltaTime > 0) {
+        this.drag.velocity = deltaX / deltaTime;
+      }
+      this.drag.currentX = e.clientX;
+      this.drag.lastX = e.clientX;
+      this.drag.lastTime = currentTime;
+      const dragDistance = this.drag.currentX - this.drag.startX;
+      const {
+        currentIndex
+      } = this.carousel.state;
+      this.carousel.ui.updateDragTransform(dragDistance);
+      this.updateDraggingClass(dragDistance, currentIndex, DRAG_CONFIG.mouseThreshold);
+      if (Math.abs(dragDistance) > this.carousel.options.dragThreshold) {
+        const direction = dragDistance > 0 ? -1 : 1;
+        this.carousel.navigator.rotate(direction);
+        this.drag.startX = this.drag.currentX;
+        this.resetDragState(currentIndex);
+      }
+    });
+    this.addHandler(document, 'mouseup', () => {
+      if (!this.drag.active) return;
+      this.drag.active = false;
+      this.resetMouseCursor();
+      const {
+        currentIndex
+      } = this.carousel.state;
+      this.resetDragState(currentIndex);
+      if (Math.abs(this.drag.velocity) > DRAG_CONFIG.velocityThreshold) {
+        this.carousel.animator.startMomentum(this.drag.velocity);
+      }
+    });
+    this.addHandler(this.carousel.elements.carousel, 'mouseleave', () => {
+      if (this.drag.active) {
+        this.drag.active = false;
+        this.resetMouseCursor();
+        const {
+          currentIndex
+        } = this.carousel.state;
+        this.resetDragState(currentIndex);
+      }
+    });
+    if (window.innerWidth > BREAKPOINTS.mobile) {
+      this.resetMouseCursor();
+    }
+  }
+  initResize() {
+    let resizeTimer;
+    const handler = () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        this.carousel.animator.updateCarousel();
+      }, RESIZE_DEBOUNCE);
+    };
+    this.addHandler(window, 'resize', handler);
+  }
+  addHandler(element, event, handler, options) {
+    element.addEventListener(event, handler, options);
+    const key = `${event}-${Date.now()}-${Math.random()}`;
+    this.boundHandlers.set(key, {
+      element,
+      event,
+      handler,
+      options
+    });
+  }
+  destroy() {
+    if (this.wheel.scrollTimeout) {
+      clearTimeout(this.wheel.scrollTimeout);
+      this.wheel.scrollTimeout = null;
+    }
+    for (const {
+      element,
+      event,
+      handler,
+      options
+    } of this.boundHandlers.values()) {
+      element.removeEventListener(event, handler, options);
+    }
+    this.boundHandlers.clear();
+    this.carousel = null;
+  }
+}
+
+const DRAG_TRANSFORM_CONFIG = Object.freeze({
+  stack: {
+    maxDrag: 200,
+    offsetMultiplier: 100,
+    rotationMultiplier: 3
+  },
+  radial: {
+    rotationSensitivity: 0.2
+  },
+  classic: {
+    dragSensitivity: 0.5
+  }
+});
+class UIManager {
+  constructor(carousel) {
+    this.carousel = carousel;
+  }
+  updateActiveStates(currentIndex) {
+    for (let i = 0; i < this.carousel.items.length; i++) {
+      const item = this.carousel.items[i];
+      removeClass(item, CLASS_NAMES.itemActive, CLASS_NAMES.itemPrev, CLASS_NAMES.itemNext);
+      item.removeAttribute(ARIA.current);
+    }
+    for (let i = 0; i < this.carousel.indicators.length; i++) {
+      const indicator = this.carousel.indicators[i];
+      removeClass(indicator, CLASS_NAMES.indicatorActive, CLASS_NAMES.indicatorProgress);
+      setAttribute(indicator, ARIA.selected, 'false');
+      setAttribute(indicator, ARIA.tabindex, '-1');
+    }
+    const currentItem = this.carousel.items[currentIndex];
+    const currentIndicator = this.carousel.indicators[currentIndex];
+    if (currentItem) {
+      addClass(currentItem, CLASS_NAMES.itemActive);
+      setAttribute(currentItem, ARIA.current, 'true');
+    }
+    if (currentIndicator) {
+      removeClass(currentIndicator, CLASS_NAMES.indicatorCompleted);
+      addClass(currentIndicator, CLASS_NAMES.indicatorActive);
+      setAttribute(currentIndicator, ARIA.selected, 'true');
+      setAttribute(currentIndicator, ARIA.tabindex, '0');
+      if (this.carousel.autoRotate.isActive) {
+        this.updateIndicatorProgress(currentIndicator);
+      }
+    }
+  }
+  updateIndicatorProgress(indicator) {
+    setCSSVar(indicator, '--progress-duration', `${this.carousel.options.autoRotateInterval}ms`);
+    setTimeout(() => {
+      if (indicator) {
+        addClass(indicator, CLASS_NAMES.indicatorProgress);
+      }
+    }, DURATIONS.progressReset);
+  }
+  clearPeekItems() {
+    for (let i = 0; i < this.carousel.items.length; i++) {
+      const item = this.carousel.items[i];
+      removeClass(item, CLASS_NAMES.itemPrev, CLASS_NAMES.itemNext);
+    }
+  }
+  setPeekItems(prevIndex, nextIndex) {
+    const prevItem = this.carousel.items[prevIndex];
+    const nextItem = this.carousel.items[nextIndex];
+    if (prevItem) addClass(prevItem, CLASS_NAMES.itemPrev);
+    if (nextItem) addClass(nextItem, CLASS_NAMES.itemNext);
+  }
+  updateAutoRotateButton(isActive) {
+    const {
+      autoRotateBtn
+    } = this.carousel.elements;
+    if (!autoRotateBtn) return;
+    if (isActive) {
+      addClass(autoRotateBtn, CLASS_NAMES.btnActive);
+      setAttribute(autoRotateBtn, ARIA.pressed, 'true');
+    } else {
+      removeClass(autoRotateBtn, CLASS_NAMES.btnActive);
+      setAttribute(autoRotateBtn, ARIA.pressed, 'false');
+    }
+  }
+  addDraggingClass(index, direction) {
+    const item = this.carousel.items[index];
+    if (!item) return;
+    const leftClass = CLASS_NAMES.itemDraggingLeft;
+    const rightClass = CLASS_NAMES.itemDraggingRight;
+    removeClass(item, leftClass, rightClass);
+    if (direction === 'left') {
+      addClass(item, leftClass);
+    } else if (direction === 'right') {
+      addClass(item, rightClass);
+    }
+  }
+  removeDraggingClass(index) {
+    const item = this.carousel.items[index];
+    if (!item) return;
+    removeClass(item, CLASS_NAMES.itemDraggingLeft, CLASS_NAMES.itemDraggingRight);
+  }
+  round(value, decimals = 2) {
+    return Math.round(value * 10 ** decimals) / 10 ** decimals;
+  }
+  applyEasing(progress) {
+    return progress * (2 - Math.abs(progress));
+  }
+  updateDragTransform(dragDistance) {
+    const {
+      layoutMode
+    } = this.carousel.options;
+    if (layoutMode === 'stack') {
+      // [개발참고] Stack 모드: 탄성 효과 적용 (easeOutQuad)
+      const config = DRAG_TRANSFORM_CONFIG.stack;
+      const clampedDrag = Math.max(-config.maxDrag, Math.min(config.maxDrag, dragDistance));
+      const progress = clampedDrag / config.maxDrag;
+      const easedProgress = this.applyEasing(progress);
+      const dragOffset = this.round(easedProgress * config.offsetMultiplier);
+      const dragRotation = this.round(easedProgress * config.rotationMultiplier);
+      this.carousel.container.style.setProperty('--drag-offset', `${dragOffset}px`);
+      this.carousel.container.style.setProperty('--drag-rotation', `${dragRotation}deg`);
+    } else if (layoutMode === 'radial') {
+      const config = DRAG_TRANSFORM_CONFIG.radial;
+      const dragRotation = this.round(dragDistance * config.rotationSensitivity);
+      this.carousel.container.style.setProperty('--drag-rotation-y', `${dragRotation}deg`);
+    } else if (layoutMode === 'classic') {
+      const config = DRAG_TRANSFORM_CONFIG.classic;
+      const dragOffset = this.round(dragDistance * config.dragSensitivity);
+      this.carousel.container.style.setProperty('--drag-offset', `${dragOffset}px`);
+    }
+  }
+  clearDragTransform() {
+    this.carousel.container.style.setProperty('--drag-offset', '0px');
+    this.carousel.container.style.setProperty('--drag-rotation', '0deg');
+    this.carousel.container.style.setProperty('--drag-rotation-y', '0deg');
+  }
+  destroy() {}
+}
+
+const FULL_CIRCLE_DEGREES = 360;
+class PeekCarousel {
+  constructor(selector, options = {}) {
+    this.container = getElement(selector);
+    if (!this.container) {
+      throw new Error(`PeekCarousel: 셀렉터 "${selector}"에 해당하는 컨테이너를 찾을 수 없습니다`);
+    }
+    this.options = validateOptions(options);
+    this.initElements();
+    if (this.items.length === 0) {
+      throw new Error('PeekCarousel: 캐러셀 아이템을 찾을 수 없습니다');
+    }
+    this.state = {
+      currentIndex: this.options.startIndex,
+      angleUnit: FULL_CIRCLE_DEGREES / this.totalItems
+    };
+    this.initModules();
+    this.init();
+  }
+  initElements() {
+    this.elements = {
+      carousel: this.container.querySelector(SELECTORS.carousel),
+      prevBtn: null,
+      nextBtn: null,
+      autoRotateBtn: null,
+      controls: null,
+      nav: null
+    };
+    this.items = getElements(SELECTORS.item, this.container);
+    this.totalItems = this.items.length;
+    this.indicators = [];
+  }
+  initModules() {
+    this.navigator = new Navigator(this);
+    this.animator = new Animator(this);
+    this.autoRotate = new AutoRotate(this);
+    this.eventHandler = new EventHandler(this);
+    this.ui = new UIManager(this);
+  }
+  init() {
+    this.updateLayoutClass();
+    this.createNavigation();
+    this.createControls();
+    this.injectIcons();
+    this.createCounter();
+    this.setImageLoadingAttributes();
+    this.initCSSVariables();
+    this.eventHandler.init();
+    this.animator.updateCarousel();
+    if (this.options.autoRotate) {
+      this.autoRotate.start();
+    }
+    if (this.options.preloadRange > 0) {
+      this.preloadImages();
+    }
+  }
+  initCSSVariables() {
+    this.container.style.setProperty('--carousel-rotation', '0deg');
+    this.container.style.setProperty('--drag-offset', '0px');
+    this.container.style.setProperty('--drag-rotation', '0deg');
+    this.container.style.setProperty('--drag-rotation-y', '0deg');
+  }
+  createNavigation() {
+    if (!this.options.showNavigation) return;
+    const existingNav = this.container.querySelector(`.${CLASS_NAMES.nav}`);
+    if (existingNav) {
+      this.elements.nav = existingNav;
+      this.elements.prevBtn = existingNav.querySelector(SELECTORS.prevBtn);
+      this.elements.nextBtn = existingNav.querySelector(SELECTORS.nextBtn);
+      return;
+    }
+    const nav = document.createElement('div');
+    nav.className = CLASS_NAMES.nav;
+    const prevBtn = document.createElement('button');
+    prevBtn.className = `${CLASS_NAMES.navBtn} ${CLASS_NAMES.btn} ${CLASS_NAMES.prevBtn}`;
+    prevBtn.setAttribute('aria-label', 'Previous');
+    const nextBtn = document.createElement('button');
+    nextBtn.className = `${CLASS_NAMES.navBtn} ${CLASS_NAMES.btn} ${CLASS_NAMES.nextBtn}`;
+    nextBtn.setAttribute('aria-label', 'Next');
+    nav.appendChild(prevBtn);
+    nav.appendChild(nextBtn);
+    this.container.appendChild(nav);
+    this.elements.nav = nav;
+    this.elements.prevBtn = prevBtn;
+    this.elements.nextBtn = nextBtn;
+  }
+  createControls() {
+    if (!this.options.showIndicators && !this.options.showAutoRotateButton) return;
+    const existingControls = this.container.querySelector(`.${CLASS_NAMES.controls}`);
+    if (existingControls) {
+      this.elements.controls = existingControls;
+      const indicatorsWrapper = existingControls.querySelector(`.${CLASS_NAMES.indicators}`);
+      if (indicatorsWrapper && this.options.showIndicators) {
+        indicatorsWrapper.innerHTML = '';
+        this.createIndicators(indicatorsWrapper);
+      }
+      this.elements.autoRotateBtn = existingControls.querySelector(SELECTORS.autoRotateBtn);
+      return;
+    }
+    const controls = document.createElement('div');
+    controls.className = CLASS_NAMES.controls;
+    if (this.options.showIndicators) {
+      const indicatorsWrapper = document.createElement('div');
+      indicatorsWrapper.className = CLASS_NAMES.indicators;
+      this.createIndicators(indicatorsWrapper);
+      controls.appendChild(indicatorsWrapper);
+    }
+    if (this.options.showAutoRotateButton) {
+      const autoRotateBtn = document.createElement('button');
+      autoRotateBtn.className = `${CLASS_NAMES.autoRotateBtn} ${CLASS_NAMES.btn} ${CLASS_NAMES.btnAutoRotate}`;
+      autoRotateBtn.setAttribute('aria-label', 'Toggle auto-rotate');
+      autoRotateBtn.setAttribute('aria-pressed', 'false');
+      controls.appendChild(autoRotateBtn);
+      this.elements.autoRotateBtn = autoRotateBtn;
+    }
+    this.container.appendChild(controls);
+    this.elements.controls = controls;
+  }
+  createIndicators(wrapper) {
+    this.indicators = [];
+    for (let i = 0; i < this.totalItems; i++) {
+      const indicator = document.createElement('button');
+      const isActive = i === this.state.currentIndex;
+      indicator.className = CLASS_NAMES.indicator;
+      indicator.classList.add(CLASS_NAMES.indicatorPeek);
+      indicator.setAttribute('role', 'tab');
+      indicator.setAttribute('aria-label', `Image ${i + 1}`);
+      indicator.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      indicator.setAttribute('tabindex', isActive ? '0' : '-1');
+      if (isActive) {
+        indicator.classList.add(CLASS_NAMES.indicatorActive);
+      }
+      wrapper.appendChild(indicator);
+      this.indicators.push(indicator);
+    }
+  }
+  injectIcons() {
+    const {
+      prevBtn,
+      nextBtn,
+      autoRotateBtn
+    } = this.elements;
+    if (prevBtn) injectIcon(prevBtn, 'prev');
+    if (nextBtn) injectIcon(nextBtn, 'next');
+    if (autoRotateBtn) injectAutoRotateIcons(autoRotateBtn);
+  }
+  createCounter() {
+    if (!this.options.showCounter) return;
+    const existingCounter = this.container.querySelector(`.${CLASS_NAMES.counter}`);
+    if (existingCounter) {
+      this.counterElement = existingCounter;
+      this.updateCounter();
+      return;
+    }
+    const counter = document.createElement('div');
+    counter.className = CLASS_NAMES.counter;
+    counter.setAttribute('aria-live', 'polite');
+    counter.setAttribute('aria-atomic', 'true');
+    counter.innerHTML = `
+      <span class="${CLASS_NAMES.counterCurrent}">${this.state.currentIndex + 1}</span>
+      <span class="${CLASS_NAMES.counterSeparator}">/</span>
+      <span class="${CLASS_NAMES.counterTotal}">${this.totalItems}</span>
+    `;
+    this.container.appendChild(counter);
+    this.counterElement = counter;
+  }
+  updateCounter() {
+    if (!this.counterElement) return;
+    const currentSpan = this.counterElement.querySelector(`.${CLASS_NAMES.counterCurrent}`);
+    if (currentSpan) {
+      currentSpan.textContent = this.state.currentIndex + 1;
+    }
+  }
+  setImageLoadingAttributes() {
+    const {
+      startIndex
+    } = this.options;
+    const preloadRange = this.options.preloadRange || 1;
+    for (let index = 0; index < this.items.length; index++) {
+      const item = this.items[index];
+      const img = item.querySelector(`.${CLASS_NAMES.image}`);
+      if (!img || img.hasAttribute('loading')) continue;
+      const distance = Math.abs(index - startIndex);
+      const isNearby = distance <= preloadRange;
+      img.setAttribute('loading', isNearby ? 'eager' : 'lazy');
+    }
+  }
+  updateLayoutClass() {
+    const currentMode = this.currentLayoutMode;
+    const newMode = this.options.layoutMode;
+    if (currentMode && currentMode !== newMode) {
+      this.container.classList.remove(`peek-carousel--${currentMode}`);
+    }
+    this.container.classList.add(`peek-carousel--${newMode}`);
+    this.currentLayoutMode = newMode;
+  }
+  preloadImages() {
+    preloadImagesInRange(this.items, this.state.currentIndex, this.options.preloadRange);
+  }
+
+  // [개발참고] Public API
+  next() {
+    this.navigator.next();
+  }
+  prev() {
+    this.navigator.prev();
+  }
+  goTo(index) {
+    this.navigator.goTo(index);
+  }
+  startAutoRotate() {
+    this.autoRotate.start();
+  }
+  stopAutoRotate() {
+    this.autoRotate.stop();
+  }
+  toggleAutoRotate() {
+    this.autoRotate.toggle();
+  }
+  destroy() {
+    this.autoRotate.destroy();
+    this.animator.stopMomentum();
+    this.eventHandler.destroy();
+    this.ui.destroy();
+  }
+  get currentIndex() {
+    return this.state.currentIndex;
+  }
+  get isAutoRotating() {
+    return this.autoRotate.isActive;
+  }
+}
+
+export { PeekCarousel as default };
+//# sourceMappingURL=peek-carousel.esm.js.map