carousel.js 16.71 KiB
/**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.3.1): carousel.js
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
/**
 * ------------------------------------------------------------------------
 * Constants
 * ------------------------------------------------------------------------
const NAME                   = 'carousel'
const VERSION                = '4.3.1'
const DATA_KEY               = 'bs.carousel'
const EVENT_KEY              = `.${DATA_KEY}`
const DATA_API_KEY           = '.data-api'
const ARROW_LEFT_KEYCODE     = 37 // KeyboardEvent.which value for left arrow key
const ARROW_RIGHT_KEYCODE    = 39 // KeyboardEvent.which value for right arrow key
const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
const SWIPE_THRESHOLD        = 40
const Default = {
  interval : 5000,
  keyboard : true,
  slide    : false,
  pause    : 'hover',
  wrap     : true,
  touch    : true
const DefaultType = {
  interval : '(number|boolean)',
  keyboard : 'boolean',
  slide    : '(boolean|string)',
  pause    : '(string|boolean)',
  wrap     : 'boolean',
  touch    : 'boolean'
const Direction = {
  NEXT     : 'next',
  PREV     : 'prev',
  LEFT     : 'left',
  RIGHT    : 'right'
const Event = {
  SLIDE          : `slide${EVENT_KEY}`,
  SLID           : `slid${EVENT_KEY}`,
  KEYDOWN        : `keydown${EVENT_KEY}`,
  MOUSEENTER     : `mouseenter${EVENT_KEY}`,
  MOUSELEAVE     : `mouseleave${EVENT_KEY}`,
  TOUCHSTART     : `touchstart${EVENT_KEY}`,
  TOUCHMOVE      : `touchmove${EVENT_KEY}`,
  TOUCHEND       : `touchend${EVENT_KEY}`,
  POINTERDOWN    : `pointerdown${EVENT_KEY}`,
  POINTERUP      : `pointerup${EVENT_KEY}`,
  DRAG_START     : `dragstart${EVENT_KEY}`,
  LOAD_DATA_API  : `load${EVENT_KEY}${DATA_API_KEY}`,
  CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
const ClassName = { CAROUSEL : 'carousel', ACTIVE : 'active', SLIDE : 'slide', RIGHT : 'carousel-item-right', LEFT : 'carousel-item-left', NEXT : 'carousel-item-next', PREV : 'carousel-item-prev', ITEM : 'carousel-item', POINTER_EVENT : 'pointer-event' } const Selector = { ACTIVE : '.active', ACTIVE_ITEM : '.active.carousel-item', ITEM : '.carousel-item', ITEM_IMG : '.carousel-item img', NEXT_PREV : '.carousel-item-next, .carousel-item-prev', INDICATORS : '.carousel-indicators', DATA_SLIDE : '[data-slide], [data-slide-to]', DATA_RIDE : '[data-ride="carousel"]' } const PointerType = { TOUCH : 'touch', PEN : 'pen' } /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Carousel { constructor(element, config) { this._items = null this._interval = null this._activeElement = null this._isPaused = false this._isSliding = false this.touchTimeout = null this.touchStartX = 0 this.touchDeltaX = 0 this._config = this._getConfig(config) this._element = element this._indicatorsElement = SelectorEngine.findOne(Selector.INDICATORS, this._element) this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent) this._addEventListeners() } // Getters static get VERSION() { return VERSION } static get Default() { return Default } // Public next() { if (!this._isSliding) { this._slide(Direction.NEXT) } }