react-image-gallery - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

.babelrc

.github/ISSUE_TEMPLATE/bug_report.md

.github/ISSUE_TEMPLATE/feature_request.md

webpack.build.js

webpack.config.js

.eslintrc.json

		{
		"extends": [
		"airbnb"
		],
		"rules": {
		"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
		"react/no-array-index-key": "off"
		},
		"parser": "babel-eslint",
		"plugins": ["react", "jsx-a11y", "import"],
		"env": {
		"browser": true,
		"jest": true,
		"node": true
		}
		"env": {
		"browser": true,
		"es2021": true
		},
		"extends": [
		"eslint:recommended",
		"plugin:react/recommended"
		],
		"parser": "babel-eslint",
		"parserOptions": {
		"ecmaFeatures": {
		"jsx": true
		},
		"ecmaVersion": 12,
		"sourceType": "module"
		},
		"plugins": [
		"react"
		],
		"rules": {
		}
		}

1743

build/image-gallery.js

		@@ -1,1742 +0,1 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _clsx = require('clsx');

		var _clsx2 = _interopRequireDefault(_clsx);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _lodash = require('lodash.throttle');

		var _lodash2 = _interopRequireDefault(_lodash);

		var _lodash3 = require('lodash.debounce');

		var _lodash4 = _interopRequireDefault(_lodash3);

		var _lodash5 = require('lodash.isequal');

		var _lodash6 = _interopRequireDefault(_lodash5);

		var _resizeObserverPolyfill = require('resize-observer-polyfill');

		var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);

		var _reactSwipeable = require('react-swipeable');

		var _propTypes = require('prop-types');

		var _SVG = require('./SVG');

		var _SVG2 = _interopRequireDefault(_SVG);

		var _SwipeWrapper = require('./SwipeWrapper');

		var _SwipeWrapper2 = _interopRequireDefault(_SwipeWrapper);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var screenChangeEvents = ['fullscreenchange', 'MSFullscreenChange', 'mozfullscreenchange', 'webkitfullscreenchange'];

		var imageSetType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
		srcSet: _propTypes.string,
		media: _propTypes.string
		}));

		function isEnterOrSpaceKey(event) {
		var key = parseInt(event.keyCode \|\| event.which \|\| 0, 10);
		var ENTER_KEY_CODE = 66;
		var SPACEBAR_KEY_CODE = 62;
		return key === ENTER_KEY_CODE \|\| key === SPACEBAR_KEY_CODE;
		}

		var ImageGallery = function (_React$Component) {
		_inherits(ImageGallery, _React$Component);

		function ImageGallery(props) {
		_classCallCheck(this, ImageGallery);

		var _this = _possibleConstructorReturn(this, (ImageGallery.__proto__ \|\| Object.getPrototypeOf(ImageGallery)).call(this, props));

		_this.state = {
		currentIndex: props.startIndex,
		thumbsTranslate: 0,
		currentSlideOffset: 0,
		galleryWidth: 0,
		thumbnailsWrapperWidth: 0,
		thumbnailsWrapperHeight: 0,
		isFullscreen: false,
		isPlaying: false
		};
		_this.loadedImages = {};
		_this.imageGallery = _react2.default.createRef();
		_this.thumbnailsWrapper = _react2.default.createRef();
		_this.thumbnails = _react2.default.createRef();
		_this.imageGallerySlideWrapper = _react2.default.createRef();

		// bindings
		_this.handleKeyDown = _this.handleKeyDown.bind(_this);
		_this.handleMouseDown = _this.handleMouseDown.bind(_this);
		_this.handleOnSwiped = _this.handleOnSwiped.bind(_this);
		_this.handleScreenChange = _this.handleScreenChange.bind(_this);
		_this.handleSwiping = _this.handleSwiping.bind(_this);
		_this.onThumbnailMouseLeave = _this.onThumbnailMouseLeave.bind(_this);
		_this.handleImageError = _this.handleImageError.bind(_this);
		_this.pauseOrPlay = _this.pauseOrPlay.bind(_this);
		_this.renderThumbInner = _this.renderThumbInner.bind(_this);
		_this.renderItem = _this.renderItem.bind(_this);
		_this.slideLeft = _this.slideLeft.bind(_this);
		_this.slideRight = _this.slideRight.bind(_this);
		_this.toggleFullScreen = _this.toggleFullScreen.bind(_this);
		_this.togglePlay = _this.togglePlay.bind(_this);

		// Used to update the throttle if slideDuration changes
		_this.unthrottledSlideToIndex = _this.slideToIndex;
		_this.slideToIndex = (0, _lodash2.default)(_this.unthrottledSlideToIndex, props.slideDuration, { trailing: false });

		if (props.lazyLoad) {
		_this.lazyLoaded = [];
		}
		return _this;
		}

		_createClass(ImageGallery, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
		var _props = this.props,
		autoPlay = _props.autoPlay,
		useWindowKeyDown = _props.useWindowKeyDown;

		if (autoPlay) {
		this.play();
		}
		if (useWindowKeyDown) {
		window.addEventListener('keydown', this.handleKeyDown);
		} else {
		this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
		}
		window.addEventListener('mousedown', this.handleMouseDown);
		this.initResizeObserver(this.imageGallerySlideWrapper);
		this.addScreenChangeEvent();
		}
		}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
		var _props2 = this.props,
		items = _props2.items,
		lazyLoad = _props2.lazyLoad,
		slideDuration = _props2.slideDuration,
		slideInterval = _props2.slideInterval,
		startIndex = _props2.startIndex,
		thumbnailPosition = _props2.thumbnailPosition,
		showThumbnails = _props2.showThumbnails,
		useWindowKeyDown = _props2.useWindowKeyDown;
		var currentIndex = this.state.currentIndex;

		var itemsSizeChanged = prevProps.items.length !== items.length;
		var itemsChanged = !(0, _lodash6.default)(prevProps.items, items);
		var startIndexUpdated = prevProps.startIndex !== startIndex;
		var thumbnailsPositionChanged = prevProps.thumbnailPosition !== thumbnailPosition;
		var showThumbnailsChanged = prevProps.showThumbnails !== showThumbnails;

		if (slideInterval !== prevProps.slideInterval \|\| slideDuration !== prevProps.slideDuration) {
		// refresh setInterval
		this.pause();
		this.play();
		}

		if (thumbnailsPositionChanged) {
		// re-initialize resizeObserver because slides was unmounted and mounted again
		this.removeResizeObserver();
		this.initResizeObserver(this.imageGallerySlideWrapper);
		}

		if (itemsSizeChanged \|\| showThumbnailsChanged) {
		this.handleResize();
		}
		if (prevState.currentIndex !== currentIndex) {
		this.slideThumbnailBar(prevState.currentIndex);
		}
		// if slideDuration changes, update slideToIndex throttle
		if (prevProps.slideDuration !== slideDuration) {
		this.slideToIndex = (0, _lodash2.default)(this.unthrottledSlideToIndex, slideDuration, { trailing: false });
		}
		if (lazyLoad && (!prevProps.lazyLoad \|\| itemsChanged)) {
		this.lazyLoaded = [];
		}

		if (useWindowKeyDown !== prevProps.useWindowKeyDown) {
		if (useWindowKeyDown) {
		this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
		window.addEventListener('keydown', this.handleKeyDown);
		} else {
		window.removeEventListener('keydown', this.handleKeyDown);
		this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
		}
		}

		if (startIndexUpdated \|\| itemsChanged) {
		// TODO: this should be fix/removed
		this.setState({ currentIndex: startIndex });
		}
		}
		}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
		var useWindowKeyDown = this.props.useWindowKeyDown;

		window.removeEventListener('mousedown', this.handleMouseDown);
		this.removeScreenChangeEvent();
		this.removeResizeObserver();
		if (this.playPauseIntervalId) {
		window.clearInterval(this.playPauseIntervalId);
		this.playPauseIntervalId = null;
		}
		if (this.transitionTimer) {
		window.clearTimeout(this.transitionTimer);
		}
		if (useWindowKeyDown) {
		window.removeEventListener('keydown', this.handleKeyDown);
		} else {
		this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
		}
		}
		}, {
		key: 'onSliding',
		value: function onSliding() {
		var _this2 = this;

		var _state = this.state,
		currentIndex = _state.currentIndex,
		isTransitioning = _state.isTransitioning;
		var _props3 = this.props,
		onSlide = _props3.onSlide,
		slideDuration = _props3.slideDuration;

		this.transitionTimer = window.setTimeout(function () {
		if (isTransitioning) {
		_this2.setState({ isTransitioning: !isTransitioning });
		if (onSlide) {
		onSlide(currentIndex);
		}
		}
		}, slideDuration + 50);
		}
		}, {
		key: 'onThumbnailClick',
		value: function onThumbnailClick(event, index) {
		var onThumbnailClick = this.props.onThumbnailClick;
		// blur element to remove outline cause by focus

		event.target.parentNode.parentNode.blur();
		this.slideToIndex(index, event);
		if (onThumbnailClick) {
		onThumbnailClick(event, index);
		}
		}
		}, {
		key: 'onThumbnailMouseOver',
		value: function onThumbnailMouseOver(event, index) {
		var _this3 = this;

		if (this.thumbnailMouseOverTimer) {
		window.clearTimeout(this.thumbnailMouseOverTimer);
		this.thumbnailMouseOverTimer = null;
		}
		this.thumbnailMouseOverTimer = window.setTimeout(function () {
		_this3.slideToIndex(index);
		_this3.pause();
		}, 300);
		}
		}, {
		key: 'onThumbnailMouseLeave',
		value: function onThumbnailMouseLeave() {
		if (this.thumbnailMouseOverTimer) {
		var autoPlay = this.props.autoPlay;

		window.clearTimeout(this.thumbnailMouseOverTimer);
		this.thumbnailMouseOverTimer = null;
		if (autoPlay) {
		this.play();
		}
		}
		}
		}, {
		key: 'setScrollDirection',
		value: function setScrollDirection(dir) {
		var _state2 = this.state,
		scrollingUpDown = _state2.scrollingUpDown,
		scrollingLeftRight = _state2.scrollingLeftRight;


		if (!scrollingUpDown && !scrollingLeftRight) {
		if (dir === _reactSwipeable.LEFT \|\| dir === _reactSwipeable.RIGHT) {
		this.setState({ scrollingLeftRight: true });
		} else {
		this.setState({ scrollingUpDown: true });
		}
		}
		}
		}, {
		key: 'setThumbsTranslate',
		value: function setThumbsTranslate(thumbsTranslate) {
		this.setState({ thumbsTranslate: thumbsTranslate });
		}
		}, {
		key: 'setModalFullscreen',
		value: function setModalFullscreen(state) {
		var onScreenChange = this.props.onScreenChange;

		this.setState({ modalFullscreen: state });
		// manually call because browser does not support screenchange events
		if (onScreenChange) {
		onScreenChange(state);
		}
		}
		}, {
		key: 'getThumbsTranslate',
		value: function getThumbsTranslate(indexDifference) {
		var _props4 = this.props,
		disableThumbnailScroll = _props4.disableThumbnailScroll,
		items = _props4.items;
		var _state3 = this.state,
		thumbnailsWrapperWidth = _state3.thumbnailsWrapperWidth,
		thumbnailsWrapperHeight = _state3.thumbnailsWrapperHeight;

		var totalScroll = void 0;
		var thumbElement = this.thumbnails && this.thumbnails.current;

		if (disableThumbnailScroll) return 0;

		if (thumbElement) {
		// total scroll required to see the last thumbnail
		if (this.isThumbnailVertical()) {
		if (thumbElement.scrollHeight <= thumbnailsWrapperHeight) {
		return 0;
		}
		totalScroll = thumbElement.scrollHeight - thumbnailsWrapperHeight;
		} else {
		if (thumbElement.scrollWidth <= thumbnailsWrapperWidth \|\| thumbnailsWrapperWidth <= 0) {
		return 0;
		}
		totalScroll = thumbElement.scrollWidth - thumbnailsWrapperWidth;
		}
		// scroll-x required per index change
		var perIndexScroll = totalScroll / (items.length - 1);
		return indexDifference * perIndexScroll;
		}
		return 0;
		}
		}, {
		key: 'getAlignmentClassName',
		value: function getAlignmentClassName(index) {
		// Necessary for lazing loading
		var currentIndex = this.state.currentIndex;
		var _props5 = this.props,
		infinite = _props5.infinite,
		items = _props5.items;

		var alignment = '';
		var leftClassName = 'left';
		var centerClassName = 'center';
		var rightClassName = 'right';

		switch (index) {
		case currentIndex - 1:
		alignment = ' ' + leftClassName;
		break;
		case currentIndex:
		alignment = ' ' + centerClassName;
		break;
		case currentIndex + 1:
		alignment = ' ' + rightClassName;
		break;
		default:
		break;
		}

		if (items.length >= 3 && infinite) {
		if (index === 0 && currentIndex === items.length - 1) {
		// set first slide as right slide if were sliding right from last slide
		alignment = ' ' + rightClassName;
		} else if (index === items.length - 1 && currentIndex === 0) {
		// set last slide as left slide if were sliding left from first slide
		alignment = ' ' + leftClassName;
		}
		}

		return alignment;
		}
		}, {
		key: 'getTranslateXForTwoSlide',
		value: function getTranslateXForTwoSlide(index) {
		// For taking care of infinite swipe when there are only two slides
		var _state4 = this.state,
		currentIndex = _state4.currentIndex,
		currentSlideOffset = _state4.currentSlideOffset,
		previousIndex = _state4.previousIndex;

		var indexChanged = currentIndex !== previousIndex;
		var firstSlideWasPrevSlide = index === 0 && previousIndex === 0;
		var secondSlideWasPrevSlide = index === 1 && previousIndex === 1;
		var firstSlideIsNextSlide = index === 0 && currentIndex === 1;
		var secondSlideIsNextSlide = index === 1 && currentIndex === 0;
		var swipingEnded = currentSlideOffset === 0;
		var baseTranslateX = -100 * currentIndex;
		var translateX = baseTranslateX + index * 100 + currentSlideOffset;

		// keep track of user swiping direction
		// important to understand how to translateX based on last direction
		if (currentSlideOffset > 0) {
		this.direction = 'left';
		} else if (currentSlideOffset < 0) {
		this.direction = 'right';
		}

		// when swiping between two slides make sure the next and prev slides
		// are on both left and right
		if (secondSlideIsNextSlide && currentSlideOffset > 0) {
		// swiping right
		translateX = -100 + currentSlideOffset;
		}
		if (firstSlideIsNextSlide && currentSlideOffset < 0) {
		// swiping left
		translateX = 100 + currentSlideOffset;
		}

		if (indexChanged) {
		// when indexChanged move the slide to the correct side
		if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
		translateX = 100;
		} else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
		translateX = -100;
		}
		} else {
		// keep the slide on the correct side if the swipe was not successful
		if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
		translateX = -100;
		}
		if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
		translateX = 100;
		}
		}

		return translateX;
		}
		}, {
		key: 'getThumbnailBarHeight',
		value: function getThumbnailBarHeight() {
		if (this.isThumbnailVertical()) {
		var gallerySlideWrapperHeight = this.state.gallerySlideWrapperHeight;

		return { height: gallerySlideWrapperHeight };
		}
		return {};
		}
		}, {
		key: 'getSlideStyle',
		value: function getSlideStyle(index) {
		var _state5 = this.state,
		currentIndex = _state5.currentIndex,
		currentSlideOffset = _state5.currentSlideOffset,
		slideStyle = _state5.slideStyle;
		var _props6 = this.props,
		infinite = _props6.infinite,
		items = _props6.items,
		useTranslate3D = _props6.useTranslate3D,
		isRTL = _props6.isRTL;

		var baseTranslateX = -100 * currentIndex;
		var totalSlides = items.length - 1;

		// calculates where the other slides belong based on currentIndex
		// if it is RTL the base line should be reversed
		var translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + currentSlideOffset;

		if (infinite && items.length > 2) {
		if (currentIndex === 0 && index === totalSlides) {
		// make the last slide the slide before the first
		// if it is RTL the base line should be reversed
		translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset;
		} else if (currentIndex === totalSlides && index === 0) {
		// make the first slide the slide after the last
		// if it is RTL the base line should be reversed
		translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset;
		}
		}

		// Special case when there are only 2 items with infinite on
		if (infinite && items.length === 2) {
		translateX = this.getTranslateXForTwoSlide(index);
		}

		var translate = 'translate(' + translateX + '%, 0)';

		if (useTranslate3D) {
		translate = 'translate3d(' + translateX + '%, 0, 0)';
		}

		return _extends({}, {
		WebkitTransform: translate,
		MozTransform: translate,
		msTransform: translate,
		OTransform: translate,
		transform: translate
		}, slideStyle);
		}
		}, {
		key: 'getCurrentIndex',
		value: function getCurrentIndex() {
		var currentIndex = this.state.currentIndex;

		return currentIndex;
		}
		}, {
		key: 'getThumbnailStyle',
		value: function getThumbnailStyle() {
		var translate = void 0;
		var _props7 = this.props,
		useTranslate3D = _props7.useTranslate3D,
		isRTL = _props7.isRTL;
		var thumbsTranslate = this.state.thumbsTranslate;

		var verticalTranslateValue = isRTL ? thumbsTranslate * -1 : thumbsTranslate;

		if (this.isThumbnailVertical()) {
		translate = 'translate(0, ' + thumbsTranslate + 'px)';
		if (useTranslate3D) {
		translate = 'translate3d(0, ' + thumbsTranslate + 'px, 0)';
		}
		} else {
		translate = 'translate(' + verticalTranslateValue + 'px, 0)';
		if (useTranslate3D) {
		translate = 'translate3d(' + verticalTranslateValue + 'px, 0, 0)';
		}
		}
		return {
		WebkitTransform: translate,
		MozTransform: translate,
		msTransform: translate,
		OTransform: translate,
		transform: translate
		};
		}
		}, {
		key: 'getSlideItems',
		value: function getSlideItems() {
		var _this4 = this;

		var currentIndex = this.state.currentIndex;
		var _props8 = this.props,
		infinite = _props8.infinite,
		items = _props8.items,
		slideOnThumbnailOver = _props8.slideOnThumbnailOver,
		onClick = _props8.onClick,
		lazyLoad = _props8.lazyLoad,
		onTouchMove = _props8.onTouchMove,
		onTouchEnd = _props8.onTouchEnd,
		onTouchStart = _props8.onTouchStart,
		onMouseOver = _props8.onMouseOver,
		onMouseLeave = _props8.onMouseLeave,
		renderItem = _props8.renderItem,
		renderThumbInner = _props8.renderThumbInner,
		showThumbnails = _props8.showThumbnails,
		showBullets = _props8.showBullets;


		var slides = [];
		var thumbnails = [];
		var bullets = [];

		items.forEach(function (item, index) {
		var alignment = _this4.getAlignmentClassName(index);
		var originalClass = item.originalClass ? ' ' + item.originalClass : '';
		var thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : '';
		var handleRenderItem = item.renderItem \|\| renderItem \|\| _this4.renderItem;
		var handleRenderThumbInner = item.renderThumbInner \|\| renderThumbInner \|\| _this4.renderThumbInner;

		var showItem = !lazyLoad \|\| alignment \|\| _this4.lazyLoaded[index];
		if (showItem && lazyLoad && !_this4.lazyLoaded[index]) {
		_this4.lazyLoaded[index] = true;
		}

		var slideStyle = _this4.getSlideStyle(index);

		var slide = _react2.default.createElement(
		'div',
		{
		'aria-label': 'Go to Slide ' + (index + 1),
		key: 'slide-' + index,
		tabIndex: '-1',
		className: 'image-gallery-slide ' + alignment + ' ' + originalClass,
		style: slideStyle,
		onClick: onClick,
		onKeyUp: _this4.handleSlideKeyUp,
		onTouchMove: onTouchMove,
		onTouchEnd: onTouchEnd,
		onTouchStart: onTouchStart,
		onMouseOver: onMouseOver,
		onFocus: onMouseOver,
		onMouseLeave: onMouseLeave,
		role: 'button'
		},
		showItem ? handleRenderItem(item) : _react2.default.createElement('div', { style: { height: '100%' } })
		);

		if (infinite) {
		// don't add some slides while transitioning to avoid background transitions
		if (_this4.shouldPushSlideOnInfiniteMode(index)) {
		slides.push(slide);
		}
		} else {
		slides.push(slide);
		}

		if (showThumbnails) {
		var igThumbnailClass = (0, _clsx2.default)('image-gallery-thumbnail', thumbnailClass, { active: currentIndex === index });
		thumbnails.push(_react2.default.createElement(
		'button',
		{
		key: 'thumbnail-' + index,
		type: 'button',
		tabIndex: '0',
		'aria-pressed': currentIndex === index ? 'true' : 'false',
		'aria-label': 'Go to Slide ' + (index + 1),
		className: igThumbnailClass,
		onMouseLeave: slideOnThumbnailOver ? _this4.onThumbnailMouseLeave : null,
		onMouseOver: function onMouseOver(event) {
		return _this4.handleThumbnailMouseOver(event, index);
		},
		onFocus: function onFocus(event) {
		return _this4.handleThumbnailMouseOver(event, index);
		},
		onKeyUp: function onKeyUp(event) {
		return _this4.handleThumbnailKeyUp(event, index);
		},
		onClick: function onClick(event) {
		return _this4.onThumbnailClick(event, index);
		}
		},
		handleRenderThumbInner(item)
		));
		}

		if (showBullets) {
		// generate bullet elements and store them in array
		var bulletOnClick = function bulletOnClick(event) {
		if (item.bulletOnClick) {
		item.bulletOnClick({ item: item, itemIndex: index, currentIndex: currentIndex });
		}
		// blur element to remove outline cause by focus
		event.target.blur();
		return _this4.slideToIndex.call(_this4, index, event);
		};
		var igBulletClass = (0, _clsx2.default)('image-gallery-bullet', item.bulletClass, { active: currentIndex === index });
		bullets.push(_react2.default.createElement('button', {
		type: 'button',
		key: 'bullet-' + index,
		className: igBulletClass,
		onClick: bulletOnClick,
		'aria-pressed': currentIndex === index ? 'true' : 'false',
		'aria-label': 'Go to Slide ' + (index + 1)
		}));
		}
		});

		return {
		slides: slides,
		thumbnails: thumbnails,
		bullets: bullets
		};
		}
		}, {
		key: 'ignoreIsTransitioning',
		value: function ignoreIsTransitioning() {
		/*
		Ignore isTransitioning because were not going to sibling slides
		e.g. center to left or center to right
		*/
		var items = this.props.items;
		var _state6 = this.state,
		previousIndex = _state6.previousIndex,
		currentIndex = _state6.currentIndex;

		var totalSlides = items.length - 1;
		// we want to show the in between slides transition
		var slidingMoreThanOneSlideLeftOrRight = Math.abs(previousIndex - currentIndex) > 1;
		var notGoingFromFirstToLast = !(previousIndex === 0 && currentIndex === totalSlides);
		var notGoingFromLastToFirst = !(previousIndex === totalSlides && currentIndex === 0);

		return slidingMoreThanOneSlideLeftOrRight && notGoingFromFirstToLast && notGoingFromLastToFirst;
		}
		}, {
		key: 'isFirstOrLastSlide',
		value: function isFirstOrLastSlide(index) {
		var items = this.props.items;

		var totalSlides = items.length - 1;
		var isLastSlide = index === totalSlides;
		var isFirstSlide = index === 0;
		return isLastSlide \|\| isFirstSlide;
		}
		}, {
		key: 'slideIsTransitioning',
		value: function slideIsTransitioning(index) {
		/*
		returns true if the gallery is transitioning and the index is not the
		previous or currentIndex
		*/
		var _state7 = this.state,
		isTransitioning = _state7.isTransitioning,
		previousIndex = _state7.previousIndex,
		currentIndex = _state7.currentIndex;

		var indexIsNotPreviousOrNextSlide = !(index === previousIndex \|\| index === currentIndex);
		return isTransitioning && indexIsNotPreviousOrNextSlide;
		}
		}, {
		key: 'shouldPushSlideOnInfiniteMode',
		value: function shouldPushSlideOnInfiniteMode(index) {
		/*
		Push (show) slide if slide is the current slide and the next slide
		OR
		The slide is going more than one slide left or right, but not going from
		first to last and not going from last to first
		Edge case:
		If you go to the first or last slide, when they're
		not left, or right of each other they will try to catch up in the background
		so unless were going from first to last or vice versa we don't want the first
		or last slide to show up during the transition
		*/
		return !this.slideIsTransitioning(index) \|\| this.ignoreIsTransitioning() && !this.isFirstOrLastSlide(index);
		}
		}, {
		key: 'slideThumbnailBar',
		value: function slideThumbnailBar(previousIndex) {
		var _state8 = this.state,
		thumbsTranslate = _state8.thumbsTranslate,
		currentIndex = _state8.currentIndex;

		if (currentIndex === 0) {
		this.setThumbsTranslate(0);
		} else {
		var indexDifference = Math.abs(previousIndex - currentIndex);
		var scroll = this.getThumbsTranslate(indexDifference);
		if (scroll > 0) {
		if (previousIndex < currentIndex) {
		this.setThumbsTranslate(thumbsTranslate - scroll);
		} else if (previousIndex > currentIndex) {
		this.setThumbsTranslate(thumbsTranslate + scroll);
		}
		}
		}
		}
		}, {
		key: 'canSlide',
		value: function canSlide() {
		var items = this.props.items;

		return items.length >= 2;
		}
		}, {
		key: 'canSlideLeft',
		value: function canSlideLeft() {
		var _props9 = this.props,
		infinite = _props9.infinite,
		isRTL = _props9.isRTL;

		return infinite \|\| (isRTL ? this.canSlideNext() : this.canSlidePrevious());
		}
		}, {
		key: 'canSlideRight',
		value: function canSlideRight() {
		var _props10 = this.props,
		infinite = _props10.infinite,
		isRTL = _props10.isRTL;

		return infinite \|\| (isRTL ? this.canSlidePrevious() : this.canSlideNext());
		}
		}, {
		key: 'canSlidePrevious',
		value: function canSlidePrevious() {
		var currentIndex = this.state.currentIndex;

		return currentIndex > 0;
		}
		}, {
		key: 'canSlideNext',
		value: function canSlideNext() {
		var currentIndex = this.state.currentIndex;
		var items = this.props.items;

		return currentIndex < items.length - 1;
		}
		}, {
		key: 'handleSwiping',
		value: function handleSwiping(_ref) {
		var event = _ref.event,
		absX = _ref.absX,
		dir = _ref.dir;
		var _props11 = this.props,
		disableSwipe = _props11.disableSwipe,
		stopPropagation = _props11.stopPropagation;
		var _state9 = this.state,
		galleryWidth = _state9.galleryWidth,
		isTransitioning = _state9.isTransitioning;


		if (disableSwipe) return;

		var swipingTransitionDuration = this.props.swipingTransitionDuration;


		this.setScrollDirection(dir);
		if (stopPropagation) event.stopPropagation();

		if (!isTransitioning) {
		var side = dir === _reactSwipeable.RIGHT ? 1 : -1;

		var currentSlideOffset = absX / galleryWidth * 100;
		if (Math.abs(currentSlideOffset) >= 100) {
		currentSlideOffset = 100;
		}

		var swipingTransition = {
		transition: 'transform ' + swipingTransitionDuration + 'ms ease-out'
		};

		this.setState({
		currentSlideOffset: side * currentSlideOffset,
		slideStyle: swipingTransition
		});
		} else {
		// don't move the slide
		this.setState({ currentSlideOffset: 0 });
		}
		}
		}, {
		key: 'sufficientSwipe',
		value: function sufficientSwipe() {
		var currentSlideOffset = this.state.currentSlideOffset;
		var swipeThreshold = this.props.swipeThreshold;

		return Math.abs(currentSlideOffset) > swipeThreshold;
		}
		}, {
		key: 'handleOnSwiped',
		value: function handleOnSwiped(_ref2) {
		var event = _ref2.event,
		dir = _ref2.dir,
		velocity = _ref2.velocity;
		var _props12 = this.props,
		disableSwipe = _props12.disableSwipe,
		stopPropagation = _props12.stopPropagation,
		flickThreshold = _props12.flickThreshold;
		var _state10 = this.state,
		scrollingUpDown = _state10.scrollingUpDown,
		scrollingLeftRight = _state10.scrollingLeftRight;


		if (disableSwipe) return;

		var isRTL = this.props.isRTL;

		if (stopPropagation) event.stopPropagation();
		if (scrollingUpDown) {
		// user stopped scrollingUpDown
		this.setState({ scrollingUpDown: false });
		}

		if (scrollingLeftRight) {
		// user stopped scrollingLeftRight
		this.setState({ scrollingLeftRight: false });
		}

		// if it is RTL the direction is reversed
		var swipeDirection = (dir === _reactSwipeable.LEFT ? 1 : -1) * (isRTL ? -1 : 1);
		var isSwipeUpOrDown = dir === _reactSwipeable.UP \|\| dir === _reactSwipeable.DOWN;
		var isLeftRightFlick = velocity > flickThreshold && !isSwipeUpOrDown;
		this.handleOnSwipedTo(swipeDirection, isLeftRightFlick);
		}
		}, {
		key: 'handleOnSwipedTo',
		value: function handleOnSwipedTo(swipeDirection, isLeftRightFlick) {
		var _state11 = this.state,
		currentIndex = _state11.currentIndex,
		isTransitioning = _state11.isTransitioning;

		var slideTo = currentIndex;

		if ((this.sufficientSwipe() \|\| isLeftRightFlick) && !isTransitioning) {
		// slideto the next/prev slide
		slideTo += swipeDirection;
		}

		// If we can't swipe left or right, stay in the current index (noop)
		if (swipeDirection === -1 && !this.canSlideLeft() \|\| swipeDirection === 1 && !this.canSlideRight()) {
		slideTo = currentIndex;
		}

		this.unthrottledSlideToIndex(slideTo);
		}
		}, {
		key: 'handleMouseDown',
		value: function handleMouseDown() {
		// keep track of mouse vs keyboard usage for a11y
		this.imageGallery.current.classList.add('image-gallery-using-mouse');
		}
		}, {
		key: 'handleKeyDown',
		value: function handleKeyDown(event) {
		var _props13 = this.props,
		disableKeyDown = _props13.disableKeyDown,
		useBrowserFullscreen = _props13.useBrowserFullscreen;
		var isFullscreen = this.state.isFullscreen;
		// keep track of mouse vs keyboard usage for a11y

		this.imageGallery.current.classList.remove('image-gallery-using-mouse');

		if (disableKeyDown) return;
		var LEFT_ARROW = 37;
		var RIGHT_ARROW = 39;
		var ESC_KEY = 27;
		var key = parseInt(event.keyCode \|\| event.which \|\| 0, 10);

		switch (key) {
		case LEFT_ARROW:
		if (this.canSlideLeft() && !this.playPauseIntervalId) {
		this.slideLeft(event);
		}
		break;
		case RIGHT_ARROW:
		if (this.canSlideRight() && !this.playPauseIntervalId) {
		this.slideRight(event);
		}
		break;
		case ESC_KEY:
		if (isFullscreen && !useBrowserFullscreen) {
		this.exitFullScreen();
		}
		break;
		default:
		break;
		}
		}
		}, {
		key: 'handleImageError',
		value: function handleImageError(event) {
		var onErrorImageURL = this.props.onErrorImageURL;

		if (onErrorImageURL && event.target.src.indexOf(onErrorImageURL) === -1) {
		/* eslint-disable no-param-reassign */
		event.target.src = onErrorImageURL;
		/* eslint-enable no-param-reassign */
		}
		}
		}, {
		key: 'removeResizeObserver',
		value: function removeResizeObserver() {
		if (this.resizeObserver && this.imageGallerySlideWrapper && this.imageGallerySlideWrapper.current) {
		this.resizeObserver.unobserve(this.imageGallerySlideWrapper.current);
		this.resizeObserver = null;
		}
		}
		}, {
		key: 'handleResize',
		value: function handleResize() {
		var currentIndex = this.state.currentIndex;

		// if there is no resizeObserver, component has been unmounted

		if (!this.resizeObserver) {
		return;
		}

		if (this.imageGallery && this.imageGallery.current) {
		this.setState({ galleryWidth: this.imageGallery.current.offsetWidth });
		}

		if (this.imageGallerySlideWrapper && this.imageGallerySlideWrapper.current) {
		this.setState({
		gallerySlideWrapperHeight: this.imageGallerySlideWrapper.current.offsetHeight
		});
		}

		if (this.thumbnailsWrapper && this.thumbnailsWrapper.current) {
		if (this.isThumbnailVertical()) {
		this.setState({ thumbnailsWrapperHeight: this.thumbnailsWrapper.current.offsetHeight });
		} else {
		this.setState({ thumbnailsWrapperWidth: this.thumbnailsWrapper.current.offsetWidth });
		}
		}

		// Adjust thumbnail container when thumbnail width or height is adjusted
		this.setThumbsTranslate(-this.getThumbsTranslate(currentIndex));
		}
		}, {
		key: 'initResizeObserver',
		value: function initResizeObserver(element) {
		var _this5 = this;

		this.resizeObserver = new _resizeObserverPolyfill2.default((0, _lodash4.default)(function (entries) {
		if (!entries) return;
		entries.forEach(function () {
		_this5.handleResize();
		});
		}, 300));
		this.resizeObserver.observe(element.current);
		}
		}, {
		key: 'toggleFullScreen',
		value: function toggleFullScreen() {
		var isFullscreen = this.state.isFullscreen;

		if (isFullscreen) {
		this.exitFullScreen();
		} else {
		this.fullScreen();
		}
		}
		}, {
		key: 'togglePlay',
		value: function togglePlay() {
		if (this.playPauseIntervalId) {
		this.pause();
		} else {
		this.play();
		}
		}
		}, {
		key: 'handleScreenChange',
		value: function handleScreenChange() {
		/*
		handles screen change events that the browser triggers e.g. esc key
		*/
		var _props14 = this.props,
		onScreenChange = _props14.onScreenChange,
		useBrowserFullscreen = _props14.useBrowserFullscreen;

		var fullScreenElement = document.fullscreenElement \|\| document.msFullscreenElement \|\| document.mozFullScreenElement \|\| document.webkitFullscreenElement;

		// check if screenchange element is the gallery
		var isFullscreen = this.imageGallery.current === fullScreenElement;
		if (onScreenChange) onScreenChange(isFullscreen);
		if (useBrowserFullscreen) this.setState({ isFullscreen: isFullscreen });
		}
		}, {
		key: 'slideToIndex',
		value: function slideToIndex(index, event) {
		var _state12 = this.state,
		currentIndex = _state12.currentIndex,
		isTransitioning = _state12.isTransitioning;
		var _props15 = this.props,
		items = _props15.items,
		slideDuration = _props15.slideDuration,
		onBeforeSlide = _props15.onBeforeSlide;


		if (!isTransitioning) {
		if (event) {
		if (this.playPauseIntervalId) {
		// user triggered event while ImageGallery is playing, reset interval
		this.pause(false);
		this.play(false);
		}
		}

		var slideCount = items.length - 1;
		var nextIndex = index;
		if (index < 0) {
		nextIndex = slideCount;
		} else if (index > slideCount) {
		nextIndex = 0;
		}

		if (onBeforeSlide && nextIndex !== currentIndex) {
		onBeforeSlide(nextIndex);
		}

		this.setState({
		previousIndex: currentIndex,
		currentIndex: nextIndex,
		isTransitioning: nextIndex !== currentIndex,
		currentSlideOffset: 0,
		slideStyle: { transition: 'all ' + slideDuration + 'ms ease-out' }
		}, this.onSliding);
		}
		}
		}, {
		key: 'slideLeft',
		value: function slideLeft(event) {
		var isRTL = this.props.isRTL;

		if (isRTL) {
		this.slideNext(event);
		} else {
		this.slidePrevious(event);
		}
		}
		}, {
		key: 'slideRight',
		value: function slideRight(event) {
		var isRTL = this.props.isRTL;

		if (isRTL) {
		this.slidePrevious(event);
		} else {
		this.slideNext(event);
		}
		}
		}, {
		key: 'slidePrevious',
		value: function slidePrevious(event) {
		var _this6 = this;

		var _state13 = this.state,
		currentIndex = _state13.currentIndex,
		currentSlideOffset = _state13.currentSlideOffset,
		isTransitioning = _state13.isTransitioning;
		var items = this.props.items;

		var nextIndex = currentIndex - 1;

		if (isTransitioning) return;

		if (items.length === 2) {
		/*
		When there are only 2 slides fake a tiny swipe to get the slides
		on the correct side for transitioning
		*/
		this.setState({
		currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
		slideStyle: { transition: 'none' } // move the slide over instantly
		}, function () {
		// add 25ms timeout to avoid delay in moving slides over
		window.setTimeout(function () {
		return _this6.slideToIndex(nextIndex, event);
		}, 25);
		});
		} else {
		this.slideToIndex(nextIndex, event);
		}
		}
		}, {
		key: 'slideNext',
		value: function slideNext(event) {
		var _this7 = this;

		var _state14 = this.state,
		currentIndex = _state14.currentIndex,
		currentSlideOffset = _state14.currentSlideOffset,
		isTransitioning = _state14.isTransitioning;
		var items = this.props.items;

		var nextIndex = currentIndex + 1;

		if (isTransitioning) return;

		if (items.length === 2) {
		// same as above for 2 slides
		this.setState({
		currentSlideOffset: currentSlideOffset - 0.001,
		slideStyle: { transition: 'none' }
		}, function () {
		window.setTimeout(function () {
		return _this7.slideToIndex(nextIndex, event);
		}, 25);
		});
		} else {
		this.slideToIndex(nextIndex, event);
		}
		}
		}, {
		key: 'handleThumbnailMouseOver',
		value: function handleThumbnailMouseOver(event, index) {
		var slideOnThumbnailOver = this.props.slideOnThumbnailOver;

		if (slideOnThumbnailOver) this.onThumbnailMouseOver(event, index);
		}
		}, {
		key: 'handleThumbnailKeyUp',
		value: function handleThumbnailKeyUp(event, index) {
		// a11y support ^_^
		if (isEnterOrSpaceKey(event)) this.onThumbnailClick(event, index);
		}
		}, {
		key: 'handleSlideKeyUp',
		value: function handleSlideKeyUp(event) {
		// a11y support ^_^
		if (isEnterOrSpaceKey(event)) {
		var onClick = this.props.onClick;

		onClick(event);
		}
		}
		}, {
		key: 'isThumbnailVertical',
		value: function isThumbnailVertical() {
		var thumbnailPosition = this.props.thumbnailPosition;

		return thumbnailPosition === 'left' \|\| thumbnailPosition === 'right';
		}
		}, {
		key: 'addScreenChangeEvent',
		value: function addScreenChangeEvent() {
		var _this8 = this;

		screenChangeEvents.forEach(function (eventName) {
		document.addEventListener(eventName, _this8.handleScreenChange);
		});
		}
		}, {
		key: 'removeScreenChangeEvent',
		value: function removeScreenChangeEvent() {
		var _this9 = this;

		screenChangeEvents.forEach(function (eventName) {
		document.removeEventListener(eventName, _this9.handleScreenChange);
		});
		}
		}, {
		key: 'fullScreen',
		value: function fullScreen() {
		var useBrowserFullscreen = this.props.useBrowserFullscreen;

		var gallery = this.imageGallery.current;
		if (useBrowserFullscreen) {
		if (gallery.requestFullscreen) {
		gallery.requestFullscreen();
		} else if (gallery.msRequestFullscreen) {
		gallery.msRequestFullscreen();
		} else if (gallery.mozRequestFullScreen) {
		gallery.mozRequestFullScreen();
		} else if (gallery.webkitRequestFullscreen) {
		gallery.webkitRequestFullscreen();
		} else {
		// fallback to fullscreen modal for unsupported browsers
		this.setModalFullscreen(true);
		}
		} else {
		this.setModalFullscreen(true);
		}
		this.setState({ isFullscreen: true });
		}
		}, {
		key: 'exitFullScreen',
		value: function exitFullScreen() {
		var isFullscreen = this.state.isFullscreen;
		var useBrowserFullscreen = this.props.useBrowserFullscreen;

		if (isFullscreen) {
		if (useBrowserFullscreen) {
		if (document.exitFullscreen) {
		document.exitFullscreen();
		} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
		} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
		} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
		} else {
		// fallback to fullscreen modal for unsupported browsers
		this.setModalFullscreen(false);
		}
		} else {
		this.setModalFullscreen(false);
		}
		this.setState({ isFullscreen: false });
		}
		}
		}, {
		key: 'pauseOrPlay',
		value: function pauseOrPlay() {
		var infinite = this.props.infinite;
		var currentIndex = this.state.currentIndex;

		if (!infinite && !this.canSlideRight()) {
		this.pause();
		} else {
		this.slideToIndex(currentIndex + 1);
		}
		}
		}, {
		key: 'play',
		value: function play() {
		var shouldCallOnPlay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
		var _props16 = this.props,
		onPlay = _props16.onPlay,
		slideInterval = _props16.slideInterval,
		slideDuration = _props16.slideDuration;
		var currentIndex = this.state.currentIndex;

		if (!this.playPauseIntervalId) {
		this.setState({ isPlaying: true });
		this.playPauseIntervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
		if (onPlay && shouldCallOnPlay) {
		onPlay(currentIndex);
		}
		}
		}
		}, {
		key: 'pause',
		value: function pause() {
		var shouldCallOnPause = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
		var onPause = this.props.onPause;
		var currentIndex = this.state.currentIndex;

		if (this.playPauseIntervalId) {
		window.clearInterval(this.playPauseIntervalId);
		this.playPauseIntervalId = null;
		this.setState({ isPlaying: false });
		if (onPause && shouldCallOnPause) {
		onPause(currentIndex);
		}
		}
		}
		}, {
		key: 'isImageLoaded',
		value: function isImageLoaded(item) {
		/*
		Keep track of images loaded so that onImageLoad prop is not
		called multiple times when re-render the images
		*/
		var imageExists = this.loadedImages[item.original];
		if (imageExists) {
		return true;
		}
		// add image as loaded
		this.loadedImages[item.original] = true;
		return false;
		}
		}, {
		key: 'handleImageLoaded',
		value: function handleImageLoaded(event, item) {
		var onImageLoad = this.props.onImageLoad;

		var imageExists = this.loadedImages[item.original];
		if (!imageExists && onImageLoad) {
		this.loadedImages[item.original] = true; // prevent from call again
		// image just loaded, call onImageLoad
		onImageLoad(event);
		}
		}
		}, {
		key: 'renderItem',
		value: function renderItem(item) {
		var _this10 = this;

		var isFullscreen = this.state.isFullscreen;
		var onImageError = this.props.onImageError;

		var handleImageError = onImageError \|\| this.handleImageError;
		var itemSrc = isFullscreen ? item.fullscreen \|\| item.original : item.original;

		return _react2.default.createElement(
		'div',
		null,
		item.imageSet ? _react2.default.createElement(
		'picture',
		{
		onLoad: function onLoad(event) {
		return _this10.handleImageLoaded(event, item);
		},
		onError: handleImageError
		},
		item.imageSet.map(function (source, index) {
		return _react2.default.createElement('source', {
		key: 'media-' + index,
		media: source.media,
		srcSet: source.srcSet,
		type: source.type
		});
		}),
		_react2.default.createElement('img', {
		className: 'image-gallery-image',
		alt: item.originalAlt,
		src: itemSrc,
		height: item.originalHeight,
		width: item.originalWidth
		})
		) : _react2.default.createElement('img', {
		className: 'image-gallery-image',
		src: itemSrc,
		alt: item.originalAlt,
		srcSet: item.srcSet,
		height: item.originalHeight,
		width: item.originalWidth,
		sizes: item.sizes,
		title: item.originalTitle,
		onLoad: function onLoad(event) {
		return _this10.handleImageLoaded(event, item);
		},
		onError: handleImageError
		}),
		item.description && _react2.default.createElement(
		'span',
		{ className: 'image-gallery-description' },
		item.description
		)
		);
		}
		}, {
		key: 'renderThumbInner',
		value: function renderThumbInner(item) {
		var onThumbnailError = this.props.onThumbnailError;

		var handleThumbnailError = onThumbnailError \|\| this.handleImageError;

		return _react2.default.createElement(
		'span',
		{ className: 'image-gallery-thumbnail-inner' },
		_react2.default.createElement('img', {
		className: 'image-gallery-thumbnail-image',
		src: item.thumbnail,
		height: item.thumbnailHeight,
		width: item.thumbnailWidth,
		alt: item.thumbnailAlt,
		title: item.thumbnailTitle,
		onError: handleThumbnailError
		}),
		item.thumbnailLabel && _react2.default.createElement(
		'div',
		{ className: 'image-gallery-thumbnail-label' },
		item.thumbnailLabel
		)
		);
		}
		}, {
		key: 'render',
		value: function render() {
		var _state15 = this.state,
		currentIndex = _state15.currentIndex,
		isFullscreen = _state15.isFullscreen,
		modalFullscreen = _state15.modalFullscreen,
		isPlaying = _state15.isPlaying;
		var _props17 = this.props,
		additionalClass = _props17.additionalClass,
		indexSeparator = _props17.indexSeparator,
		isRTL = _props17.isRTL,
		items = _props17.items,
		thumbnailPosition = _props17.thumbnailPosition,
		renderFullscreenButton = _props17.renderFullscreenButton,
		renderCustomControls = _props17.renderCustomControls,
		renderLeftNav = _props17.renderLeftNav,
		renderRightNav = _props17.renderRightNav,
		showBullets = _props17.showBullets,
		showFullscreenButton = _props17.showFullscreenButton,
		showIndex = _props17.showIndex,
		showThumbnails = _props17.showThumbnails,
		showNav = _props17.showNav,
		showPlayButton = _props17.showPlayButton,
		renderPlayPauseButton = _props17.renderPlayPauseButton;


		var thumbnailStyle = this.getThumbnailStyle();

		var _getSlideItems = this.getSlideItems(),
		slides = _getSlideItems.slides,
		thumbnails = _getSlideItems.thumbnails,
		bullets = _getSlideItems.bullets;

		var slideWrapperClass = (0, _clsx2.default)('image-gallery-slide-wrapper', thumbnailPosition, { 'image-gallery-rtl': isRTL });

		var slideWrapper = _react2.default.createElement(
		'div',
		{ ref: this.imageGallerySlideWrapper, className: slideWrapperClass },
		renderCustomControls && renderCustomControls(),
		this.canSlide() ? _react2.default.createElement(
		_react2.default.Fragment,
		null,
		showNav && _react2.default.createElement(
		_react2.default.Fragment,
		null,
		renderLeftNav(this.slideLeft, !this.canSlideLeft()),
		renderRightNav(this.slideRight, !this.canSlideRight())
		),
		_react2.default.createElement(
		_SwipeWrapper2.default,
		{
		className: 'image-gallery-swipe',
		delta: 0,
		onSwiping: this.handleSwiping,
		onSwiped: this.handleOnSwiped
		},
		_react2.default.createElement(
		'div',
		{ className: 'image-gallery-slides' },
		slides
		)
		)
		) : _react2.default.createElement(
		'div',
		{ className: 'image-gallery-slides' },
		slides
		),
		showPlayButton && renderPlayPauseButton(this.togglePlay, isPlaying),
		showBullets && _react2.default.createElement(
		'div',
		{ className: 'image-gallery-bullets' },
		_react2.default.createElement(
		'div',
		{
		className: 'image-gallery-bullets-container',
		role: 'navigation',
		'aria-label': 'Bullet Navigation'
		},
		bullets
		)
		),
		showFullscreenButton && renderFullscreenButton(this.toggleFullScreen, isFullscreen),
		showIndex && _react2.default.createElement(
		'div',
		{ className: 'image-gallery-index' },
		_react2.default.createElement(
		'span',
		{ className: 'image-gallery-index-current' },
		currentIndex + 1
		),
		_react2.default.createElement(
		'span',
		{ className: 'image-gallery-index-separator' },
		indexSeparator
		),
		_react2.default.createElement(
		'span',
		{ className: 'image-gallery-index-total' },
		items.length
		)
		)
		);

		var igClass = (0, _clsx2.default)('image-gallery', additionalClass, { 'fullscreen-modal': modalFullscreen });
		var igContentClass = (0, _clsx2.default)('image-gallery-content', thumbnailPosition, { fullscreen: isFullscreen });
		var thumbnailWrapperClass = (0, _clsx2.default)('image-gallery-thumbnails-wrapper', thumbnailPosition, { 'thumbnails-wrapper-rtl': !this.isThumbnailVertical() && isRTL });
		return _react2.default.createElement(
		'div',
		{
		ref: this.imageGallery,
		className: igClass,
		'aria-live': 'polite'
		},
		_react2.default.createElement(
		'div',
		{ className: igContentClass },
		(thumbnailPosition === 'bottom' \|\| thumbnailPosition === 'right') && slideWrapper,
		showThumbnails && _react2.default.createElement(
		'div',
		{ className: thumbnailWrapperClass, style: this.getThumbnailBarHeight() },
		_react2.default.createElement(
		'div',
		{ className: 'image-gallery-thumbnails', ref: this.thumbnailsWrapper },
		_react2.default.createElement(
		'div',
		{
		ref: this.thumbnails,
		className: 'image-gallery-thumbnails-container',
		style: thumbnailStyle,
		'aria-label': 'Thumbnail Navigation'
		},
		thumbnails
		)
		)
		),
		(thumbnailPosition === 'top' \|\| thumbnailPosition === 'left') && slideWrapper
		)
		);
		}
		}]);

		return ImageGallery;
		}(_react2.default.Component);

		ImageGallery.propTypes = {
		flickThreshold: _propTypes.number,
		items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
		bulletClass: _propTypes.string,
		bulletOnClick: _propTypes.func,
		description: _propTypes.string,
		original: _propTypes.string,
		originalHeight: _propTypes.number,
		originalWidth: _propTypes.number,
		thumbnailHeight: _propTypes.number,
		thumbnailWidth: _propTypes.number,
		fullscreen: _propTypes.string,
		originalAlt: _propTypes.string,
		originalTitle: _propTypes.string,
		thumbnail: _propTypes.string,
		thumbnailAlt: _propTypes.string,
		thumbnailLabel: _propTypes.string,
		thumbnailTitle: _propTypes.string,
		originalClass: _propTypes.string,
		thumbnailClass: _propTypes.string,
		renderItem: _propTypes.func,
		renderThumbInner: _propTypes.func,
		imageSet: imageSetType,
		srcSet: _propTypes.string,
		sizes: _propTypes.string
		})).isRequired,
		showNav: _propTypes.bool,
		autoPlay: _propTypes.bool,
		lazyLoad: _propTypes.bool,
		infinite: _propTypes.bool,
		showIndex: _propTypes.bool,
		showBullets: _propTypes.bool,
		showThumbnails: _propTypes.bool,
		showPlayButton: _propTypes.bool,
		showFullscreenButton: _propTypes.bool,
		disableThumbnailScroll: _propTypes.bool,
		disableKeyDown: _propTypes.bool,
		disableSwipe: _propTypes.bool,
		useBrowserFullscreen: _propTypes.bool,
		onErrorImageURL: _propTypes.string,
		indexSeparator: _propTypes.string,
		thumbnailPosition: (0, _propTypes.oneOf)(['top', 'bottom', 'left', 'right']),
		startIndex: _propTypes.number,
		slideDuration: _propTypes.number,
		slideInterval: _propTypes.number,
		slideOnThumbnailOver: _propTypes.bool,
		swipeThreshold: _propTypes.number,
		swipingTransitionDuration: _propTypes.number,
		onSlide: _propTypes.func,
		onBeforeSlide: _propTypes.func,
		onScreenChange: _propTypes.func,
		onPause: _propTypes.func,
		onPlay: _propTypes.func,
		onClick: _propTypes.func,
		onImageLoad: _propTypes.func,
		onImageError: _propTypes.func,
		onTouchMove: _propTypes.func,
		onTouchEnd: _propTypes.func,
		onTouchStart: _propTypes.func,
		onMouseOver: _propTypes.func,
		onMouseLeave: _propTypes.func,
		onThumbnailError: _propTypes.func,
		onThumbnailClick: _propTypes.func,
		renderCustomControls: _propTypes.func,
		renderLeftNav: _propTypes.func,
		renderRightNav: _propTypes.func,
		renderPlayPauseButton: _propTypes.func,
		renderFullscreenButton: _propTypes.func,
		renderItem: _propTypes.func,
		renderThumbInner: _propTypes.func,
		stopPropagation: _propTypes.bool,
		additionalClass: _propTypes.string,
		useTranslate3D: _propTypes.bool,
		isRTL: _propTypes.bool,
		useWindowKeyDown: _propTypes.bool
		};
		ImageGallery.defaultProps = {
		onErrorImageURL: '',
		additionalClass: '',
		showNav: true,
		autoPlay: false,
		lazyLoad: false,
		infinite: true,
		showIndex: false,
		showBullets: false,
		showThumbnails: true,
		showPlayButton: true,
		showFullscreenButton: true,
		disableThumbnailScroll: false,
		disableKeyDown: false,
		disableSwipe: false,
		useTranslate3D: true,
		isRTL: false,
		useBrowserFullscreen: true,
		flickThreshold: 0.4,
		stopPropagation: false,
		indexSeparator: ' / ',
		thumbnailPosition: 'bottom',
		startIndex: 0,
		slideDuration: 450,
		swipingTransitionDuration: 0,
		onSlide: null,
		onBeforeSlide: null,
		onScreenChange: null,
		onPause: null,
		onPlay: null,
		onClick: null,
		onImageLoad: null,
		onImageError: null,
		onTouchMove: null,
		onTouchEnd: null,
		onTouchStart: null,
		onMouseOver: null,
		onMouseLeave: null,
		onThumbnailError: null,
		onThumbnailClick: null,
		renderCustomControls: null,
		renderThumbInner: null,
		renderItem: null,
		slideInterval: 3000,
		slideOnThumbnailOver: false,
		swipeThreshold: 30,
		renderLeftNav: function renderLeftNav(onClick, disabled) {
		return _react2.default.createElement(
		'button',
		{
		type: 'button',
		className: 'image-gallery-icon image-gallery-left-nav',
		disabled: disabled,
		onClick: onClick,
		'aria-label': 'Previous Slide'
		},
		_react2.default.createElement(_SVG2.default, { icon: 'left', viewBox: '6 0 12 24' })
		);
		},
		renderRightNav: function renderRightNav(onClick, disabled) {
		return _react2.default.createElement(
		'button',
		{
		type: 'button',
		className: 'image-gallery-icon image-gallery-right-nav',
		disabled: disabled,
		onClick: onClick,
		'aria-label': 'Next Slide'
		},
		_react2.default.createElement(_SVG2.default, { icon: 'right', viewBox: '6 0 12 24' })
		);
		},
		renderPlayPauseButton: function renderPlayPauseButton(onClick, isPlaying) {
		return _react2.default.createElement(
		'button',
		{
		type: 'button',
		className: 'image-gallery-icon image-gallery-play-button',
		onClick: onClick,
		'aria-label': 'Play or Pause Slideshow'
		},
		_react2.default.createElement(_SVG2.default, { strokeWidth: 2, icon: isPlaying ? 'pause' : 'play' })
		);
		},
		renderFullscreenButton: function renderFullscreenButton(onClick, isFullscreen) {
		return _react2.default.createElement(
		'button',
		{
		type: 'button',
		className: 'image-gallery-icon image-gallery-fullscreen-button',
		onClick: onClick,
		'aria-label': 'Open Fullscreen'
		},
		_react2.default.createElement(_SVG2.default, { strokeWidth: 2, icon: isFullscreen ? 'minimize' : 'maximize' })
		);
		},
		useWindowKeyDown: true
		};
		exports.default = ImageGallery;
		!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ImageGallery=t(require("react")):e.ImageGallery=t(e.React)}(self,(function(e){return(()=>{var t={705:(e,t,n)=>{var i=n(639).Symbol;e.exports=i},239:(e,t,n)=>{var i=n(705),r=n(607),a=n(333),s=i?i.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":s&&s in Object(e)?r(e):a(e)}},561:(e,t,n)=>{var i=n(990),r=/^\s+/;e.exports=function(e){return e?e.slice(0,i(e)+1).replace(r,""):e}},957:(e,t,n)=>{var i="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g;e.exports=i},607:(e,t,n)=>{var i=n(705),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=i?i.toStringTag:void 0;e.exports=function(e){var t=a.call(e,o),n=e[o];try{e[o]=void 0;var i=!0}catch(e){}var r=s.call(e);return i&&(t?e[o]=n:delete e[o]),r}},333:e=>{var t=Object.prototype.toString;e.exports=function(e){return t.call(e)}},639:(e,t,n)=>{var i=n(957),r="object"==typeof self&&self&&self.Object===Object&&self,a=i\|\|r\|\|Function("return this")();e.exports=a},990:e=>{var t=/\s/;e.exports=function(e){for(var n=e.length;n--&&t.test(e.charAt(n)););return n}},279:(e,t,n)=>{var i=n(218),r=n(771),a=n(841),s=Math.max,o=Math.min;e.exports=function(e,t,n){var l,u,c,h,d,f,p=0,m=!1,v=!1,g=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function b(t){var n=l,i=u;return l=u=void 0,p=t,h=e.apply(i,n)}function y(e){return p=e,d=setTimeout(T,t),m?b(e):h}function w(e){var n=e-f;return void 0===f\|\|n>=t\|\|n<0\|\|v&&e-p>=c}function T(){var e=r();if(w(e))return S(e);d=setTimeout(T,function(e){var n=t-(e-f);return v?o(n,c-(e-p)):n}(e))}function S(e){return d=void 0,g&&l?b(e):(l=u=void 0,h)}function O(){var e=r(),n=w(e);if(l=arguments,u=this,f=e,n){if(void 0===d)return y(f);if(v)return clearTimeout(d),d=setTimeout(T,t),b(f)}return void 0===d&&(d=setTimeout(T,t)),h}return t=a(t)\|\|0,i(n)&&(m=!!n.leading,c=(v="maxWait"in n)?s(a(n.maxWait)\|\|0,t):c,g="trailing"in n?!!n.trailing:g),O.cancel=function(){void 0!==d&&clearTimeout(d),p=0,l=f=u=d=void 0},O.flush=function(){return void 0===d?h:S(r())},O}},218:e=>{e.exports=function(e){var t=typeof e;return null!=e&&("object"==t\|\|"function"==t)}},5:e=>{e.exports=function(e){return null!=e&&"object"==typeof e}},448:(e,t,n)=>{var i=n(239),r=n(5);e.exports=function(e){return"symbol"==typeof e\|\|r(e)&&"[object Symbol]"==i(e)}},771:(e,t,n)=>{var i=n(639);e.exports=function(){return i.Date.now()}},493:(e,t,n)=>{var i=n(279),r=n(218);e.exports=function(e,t,n){var a=!0,s=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return r(n)&&(a="leading"in n?!!n.leading:a,s="trailing"in n?!!n.trailing:s),i(e,t,{leading:a,maxWait:t,trailing:s})}},841:(e,t,n)=>{var i=n(561),r=n(218),a=n(448),s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(a(e))return NaN;if(r(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=r(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=i(e);var n=o.test(e);return n\|\|l.test(e)?u(e.slice(2),n?2:8):s.test(e)?NaN:+e}},703:(e,t,n)=>{"use strict";var i=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,s){if(s!==i){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},590:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,i="function"==typeof Set,r="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,s){if(e===s)return!0;if(e&&s&&"object"==typeof e&&"object"==typeof s){if(e.constructor!==s.constructor)return!1;var o,l,u,c;if(Array.isArray(e)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(!a(e[l],s[l]))return!1;return!0}if(n&&e instanceof Map&&s instanceof Map){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;for(c=e.entries();!(l=c.next()).done;)if(!a(l.value[1],s.get(l.value[0])))return!1;return!0}if(i&&e instanceof Set&&s instanceof Set){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;return!0}if(r&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(s)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(e[l]!==s[l])return!1;return!0}if(e.constructor===RegExp)return e.source===s.source&&e.flags===s.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===s.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===s.toString();if((o=(u=Object.keys(e)).length)!==Object.keys(s).length)return!1;for(l=o;0!=l--;)if(!Object.prototype.hasOwnProperty.call(s,u[l]))return!1;if(t&&e instanceof Element)return!1;for(l=o;0!=l--;)if(("_owner"!==u[l]&&"__v"!==u[l]&&"__o"!==u[l]\|\|!e.$$typeof)&&!a(e[u[l]],s[u[l]]))return!1;return!0}return e!=e&&s!=s}e.exports=function(e,t){try{return a(e,t)}catch(e){if((e.message\|\|"").match(/stack\|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw e}}},37:function(e,t,n){!function(e,t){function n(){return(n=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var i="Left",r="Right",a="Down",s={delta:10,preventDefaultTouchmoveEvent:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0},o={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},l="mousemove",u="mouseup";function c(e,t){if(0===t)return e;var n=Math.PI/180t;return[e[0]Math.cos(n)+e[1]Math.sin(n),e[1]Math.cos(n)-e[0]Math.sin(n)]}function h(e,t){var s=function(t){t&&"touches"in t&&t.touches.length>1\|\|e((function(e,i){i.trackMouse&&(document.addEventListener(l,h),document.addEventListener(u,f));var r="touches"in t?t.touches[0]:t,a=c([r.clientX,r.clientY],i.rotationAngle);return n({},e,o,{initial:[].concat(a),xy:a,start:t.timeStamp\|\|0})}))},h=function(t){e((function(e,s){if("touches"in t&&t.touches.length>1)return e;var o="touches"in t?t.touches[0]:t,l=c([o.clientX,o.clientY],s.rotationAngle),u=l[0],h=l[1],d=u-e.xy[0],f=h-e.xy[1],p=Math.abs(d),m=Math.abs(f),v=(t.timeStamp\|\|0)-e.start,g=Math.sqrt(pp+mm)/(v\|\|1),b=[d/(v\|\|1),f/(v\|\|1)];if(p<s.delta&&m<s.delta&&!e.swiping)return e;var y=function(e,t,n,s){return e>t?n>0?r:i:s>0?a:"Up"}(p,m,d,f),w={absX:p,absY:m,deltaX:d,deltaY:f,dir:y,event:t,first:e.first,initial:e.initial,velocity:g,vxvy:b};s.onSwiping&&s.onSwiping(w);var T=!1;return(s.onSwiping\|\|s.onSwiped\|\|"onSwiped"+y in s)&&(T=!0),T&&s.preventDefaultTouchmoveEvent&&s.trackTouch&&t.cancelable&&t.preventDefault(),n({},e,{first:!1,eventData:w,swiping:!0})}))},d=function(t){e((function(e,i){var r;if(e.swiping&&e.eventData){r=n({},e.eventData,{event:t}),i.onSwiped&&i.onSwiped(r);var a="onSwiped"+r.dir;a in i&&i[a](r)}else i.onTap&&i.onTap({event:t});return n({},e,o,{eventData:r})}))},f=function(e){document.removeEventListener(l,h),document.removeEventListener(u,f),d(e)},p=function(e,t){var n=function(){};if(e&&e.addEventListener){var i=[["touchstart",s],["touchmove",h],["touchend",d]];i.forEach((function(n){var i=n[0],r=n[1];return e.addEventListener(i,r,{passive:t})})),n=function(){return i.forEach((function(t){var n=t[0],i=t[1];return e.removeEventListener(n,i)}))}}return n},m={ref:function(t){null!==t&&e((function(e,i){if(e.el===t)return e;var r={};return e.el&&e.el!==t&&e.cleanUpTouch&&(e.cleanUpTouch(),r.cleanUpTouch=void 0),i.trackTouch&&t&&(r.cleanUpTouch=p(t,!i.preventDefaultTouchmoveEvent)),n({},e,{el:t},r)}))}};return t.trackMouse&&(m.onMouseDown=s),[m,p]}e.DOWN=a,e.LEFT=i,e.RIGHT=r,e.UP="Up",e.useSwipeable=function(e){var i=e.trackMouse,r=t.useRef(n({},o)),a=t.useRef(n({},s));a.current=n({},s,e);var l=t.useMemo((function(){return h((function(e){return r.current=e(r.current,a.current)}),{trackMouse:i})}),[i]),u=l[0],c=l[1];return r.current=function(e,t,i){var r={};return!t.trackTouch&&e.cleanUpTouch?(e.cleanUpTouch(),r.cleanUpTouch=void 0):t.trackTouch&&!e.cleanUpTouch&&e.el&&(r.cleanUpTouch=i(e.el,!t.preventDefaultTouchmoveEvent)),n({},e,r)}(r.current,a.current,c),u}}(t,n(798))},798:t=>{"use strict";t.exports=e}},n={};function i(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,i),a.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{"use strict";function e(t){var n,i,r="";if("string"==typeof t\|\|"number"==typeof t)r+=t;else if("object"==typeof t)if(Array.isArray(t))for(n=0;n<t.length;n++)t[n]&&(i=e(t[n]))&&(r&&(r+=" "),r+=i);else for(n in t)t[n]&&(r&&(r+=" "),r+=n);return r}function t(){for(var t,n,i=0,r="";i<arguments.length;)(t=arguments[i++])&&(n=e(t))&&(r&&(r+=" "),r+=n);return r}i.r(r),i.d(r,{default:()=>ee});var n=i(798),a=i.n(n),s=i(493),o=i.n(s),l=i(279),u=i.n(l),c=i(590),h=i.n(c),d=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some((function(e,i){return e[0]===t&&(n=i,!0)})),n}return function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),i=this.__entries__[n];return i&&i[1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,i=this.__entries__;n<i.length;n++){var r=i[n];e.call(t,r[1],r[0])}},t}()}(),f="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,p=void 0!==i.g&&i.g.Math===Math?i.g:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),m="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(p):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)},v=["top","right","bottom","left","width","height","size","weight"],g="undefined"!=typeof MutationObserver,b=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,i=!1,r=0;function a(){n&&(n=!1,e()),i&&o()}function s(){m(a)}function o(){var e=Date.now();if(n){if(e-r<2)return;i=!0}else n=!0,i=!1,setTimeout(s,20);r=e}return o}(this.refresh.bind(this))}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)\|\|this.observers_.push(e),this.connected_\|\|this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter((function(e){return e.gatherActive(),e.hasActive()}));return e.forEach((function(e){return e.broadcastActive()})),e.length>0},e.prototype.connect_=function(){f&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),g?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){f&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;v.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()},e.getInstance=function(){return this.instance_\|\|(this.instance_=new e),this.instance_},e.instance_=null,e}(),y=function(e,t){for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];Object.defineProperty(e,r,{value:t[r],enumerable:!1,writable:!1,configurable:!0})}return e},w=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView\|\|p},T=I(0,0,0,0);function S(e){return parseFloat(e)\|\|0}function O(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+S(e["border-"+n+"-width"])}),0)}var E="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof w(e).SVGGraphicsElement}:function(e){return e instanceof w(e).SVGElement&&"function"==typeof e.getBBox};function x(e){return f?E(e)?function(e){var t=e.getBBox();return I(0,0,t.width,t.height)}(e):function(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return T;var i=w(e).getComputedStyle(e),r=function(e){for(var t={},n=0,i=["top","right","bottom","left"];n<i.length;n++){var r=i[n],a=e["padding-"+r];t[r]=S(a)}return t}(i),a=r.left+r.right,s=r.top+r.bottom,o=S(i.width),l=S(i.height);if("border-box"===i.boxSizing&&(Math.round(o+a)!==t&&(o-=O(i,"left","right")+a),Math.round(l+s)!==n&&(l-=O(i,"top","bottom")+s)),!function(e){return e===w(e).document.documentElement}(e)){var u=Math.round(o+a)-t,c=Math.round(l+s)-n;1!==Math.abs(u)&&(o-=u),1!==Math.abs(c)&&(l-=c)}return I(r.left,r.top,o,l)}(e):T}function I(e,t,n,i){return{x:e,y:t,width:n,height:i}}var k=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=I(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=x(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth\|\|e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),_=function(e,t){var n,i,r,a,s,o,l,u=(i=(n=t).x,r=n.y,a=n.width,s=n.height,o="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(o.prototype),y(l,{x:i,y:r,width:a,height:s,top:r,right:i+a,bottom:s+r,left:i}),l);y(this,{target:e,contentRect:u})},P=function(){function e(e,t,n){if(this.activeObservations_=[],this.observations_=new d,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=n}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof w(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)\|\|(t.set(e,new k(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof w(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size\|\|this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map((function(e){return new _(e.target,e.broadcastRect())}));this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),M="undefined"!=typeof WeakMap?new WeakMap:new d,L=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=b.getInstance(),i=new P(t,n,this);M.set(this,i)};["observe","unobserve","disconnect"].forEach((function(e){L.prototype[e]=function(){var t;return(t=M.get(this))[e].apply(t,arguments)}}));const R=void 0!==p.ResizeObserver?p.ResizeObserver:L;var D=i(37),F=i(697),W={left:a().createElement("polyline",{points:"15 18 9 12 15 6"}),right:a().createElement("polyline",{points:"9 18 15 12 9 6"}),maximize:a().createElement("path",{d:"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"}),minimize:a().createElement("path",{d:"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"}),play:a().createElement("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:a().createElement(a().Fragment,null,a().createElement("rect",{x:"6",y:"4",width:"4",height:"16"}),a().createElement("rect",{x:"14",y:"4",width:"4",height:"16"}))},C=function(e){var t=e.strokeWidth,n=e.viewBox,i=e.icon;return a().createElement("svg",{className:"image-gallery-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:n,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round"},W[i])};C.propTypes={strokeWidth:F.number,viewBox:F.string,icon:(0,F.oneOf)(["left","right","maximize","minimize","play","pause"]).isRequired},C.defaultProps={strokeWidth:1,viewBox:"0 0 24 24"};const N=C;function j(){return(j=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var z=function(e){var t=e.children,n=e.className,i=e.delta,r=e.onSwiping,s=e.onSwiped,o=(0,D.useSwipeable)({delta:i,onSwiping:r,onSwiped:s});return a().createElement("div",j({},o,{className:n}),t)};z.propTypes={children:F.node.isRequired,className:F.string,delta:F.number,onSwiped:F.func,onSwiping:F.func},z.defaultProps={className:"",delta:0,onSwiping:function(){},onSwiped:function(){}};const B=z;function A(e){return(A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function G(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function U(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?G(Object(n),!0).forEach((function(t){H(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):G(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function H(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable\|\|!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function q(e,t){return(q=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function V(e,t){return!t\|\|"object"!==A(t)&&"function"!=typeof t?X(e):t}function X(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var $=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"],J=(0,F.arrayOf)((0,F.shape)({srcSet:F.string,media:F.string}));function Q(e){var t=parseInt(e.keyCode\|\|e.which\|\|0,10);return 66===t\|\|62===t}var Z=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&q(e,t)}(c,e);var n,i,r,s,l=(r=c,s=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=Y(r);if(s){var n=Y(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return V(this,e)});function c(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),(t=l.call(this,e)).state={currentIndex:e.startIndex,thumbsTranslate:0,thumbsSwipedTranslate:0,currentSlideOffset:0,galleryWidth:0,thumbnailsWrapperWidth:0,thumbnailsWrapperHeight:0,thumbsStyle:{transition:"all ".concat(e.slideDuration,"ms ease-out")},isFullscreen:!1,isSwipingThumbnail:!1,isPlaying:!1},t.loadedImages={},t.imageGallery=a().createRef(),t.thumbnailsWrapper=a().createRef(),t.thumbnails=a().createRef(),t.imageGallerySlideWrapper=a().createRef(),t.handleKeyDown=t.handleKeyDown.bind(X(t)),t.handleMouseDown=t.handleMouseDown.bind(X(t)),t.handleOnSwiped=t.handleOnSwiped.bind(X(t)),t.handleScreenChange=t.handleScreenChange.bind(X(t)),t.handleSwiping=t.handleSwiping.bind(X(t)),t.handleThumbnailSwiping=t.handleThumbnailSwiping.bind(X(t)),t.handleOnThumbnailSwiped=t.handleOnThumbnailSwiped.bind(X(t)),t.onThumbnailMouseLeave=t.onThumbnailMouseLeave.bind(X(t)),t.handleImageError=t.handleImageError.bind(X(t)),t.pauseOrPlay=t.pauseOrPlay.bind(X(t)),t.renderThumbInner=t.renderThumbInner.bind(X(t)),t.renderItem=t.renderItem.bind(X(t)),t.slideLeft=t.slideLeft.bind(X(t)),t.slideRight=t.slideRight.bind(X(t)),t.toggleFullScreen=t.toggleFullScreen.bind(X(t)),t.togglePlay=t.togglePlay.bind(X(t)),t.unthrottledSlideToIndex=t.slideToIndex,t.slideToIndex=o()(t.unthrottledSlideToIndex,e.slideDuration,{trailing:!1}),e.lazyLoad&&(t.lazyLoaded=[]),t}return n=c,(i=[{key:"componentDidMount",value:function(){var e=this.props,t=e.autoPlay,n=e.useWindowKeyDown;t&&this.play(),n?window.addEventListener("keydown",this.handleKeyDown):this.imageGallery.current.addEventListener("keydown",this.handleKeyDown),window.addEventListener("mousedown",this.handleMouseDown),this.initResizeObserver(this.imageGallerySlideWrapper),this.addScreenChangeEvent()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props,i=n.items,r=n.lazyLoad,a=n.slideDuration,s=n.slideInterval,l=n.startIndex,u=n.thumbnailPosition,c=n.showThumbnails,d=n.useWindowKeyDown,f=this.state.currentIndex,p=e.items.length!==i.length,m=!h()(e.items,i),v=e.startIndex!==l,g=e.thumbnailPosition!==u,b=e.showThumbnails!==c;s===e.slideInterval&&a===e.slideDuration\|\|(this.pause(),this.play()),g&&(this.removeResizeObserver(),this.initResizeObserver(this.imageGallerySlideWrapper)),(p\|\|b)&&this.handleResize(),t.currentIndex!==f&&this.slideThumbnailBar(),e.slideDuration!==a&&(this.slideToIndex=o()(this.unthrottledSlideToIndex,a,{trailing:!1})),!r\|\|e.lazyLoad&&!m\|\|(this.lazyLoaded=[]),d!==e.useWindowKeyDown&&(d?(this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown),window.addEventListener("keydown",this.handleKeyDown)):(window.removeEventListener("keydown",this.handleKeyDown),this.imageGallery.current.addEventListener("keydown",this.handleKeyDown))),(v\|\|m)&&this.setState({currentIndex:l})}},{key:"componentWillUnmount",value:function(){var e=this.props.useWindowKeyDown;window.removeEventListener("mousedown",this.handleMouseDown),this.removeScreenChangeEvent(),this.removeResizeObserver(),this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null),this.transitionTimer&&window.clearTimeout(this.transitionTimer),e?window.removeEventListener("keydown",this.handleKeyDown):this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown)}},{key:"onSliding",value:function(){var e=this,t=this.state,n=t.currentIndex,i=t.isTransitioning,r=this.props,a=r.onSlide,s=r.slideDuration;this.transitionTimer=window.setTimeout((function(){i&&(e.setState({isTransitioning:!i,isSwipingThumbnail:!1}),a&&a(n))}),s+50)}},{key:"onThumbnailClick",value:function(e,t){var n=this.props.onThumbnailClick;e.target.parentNode.parentNode.blur(),this.slideToIndex(t,e),n&&n(e,t)}},{key:"onThumbnailMouseOver",value:function(e,t){var n=this;this.thumbnailMouseOverTimer&&(window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null),this.thumbnailMouseOverTimer=window.setTimeout((function(){n.slideToIndex(t),n.pause()}),300)}},{key:"onThumbnailMouseLeave",value:function(){if(this.thumbnailMouseOverTimer){var e=this.props.autoPlay;window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null,e&&this.play()}}},{key:"setScrollDirection",value:function(e){var t=this.state,n=t.scrollingUpDown,i=t.scrollingLeftRight;n\|\|i\|\|(e===D.LEFT\|\|e===D.RIGHT?this.setState({scrollingLeftRight:!0}):this.setState({scrollingUpDown:!0}))}},{key:"setThumbsTranslate",value:function(e){this.setState({thumbsTranslate:e})}},{key:"setModalFullscreen",value:function(e){var t=this.props.onScreenChange;this.setState({modalFullscreen:e}),t&&t(e)}},{key:"getThumbsTranslate",value:function(e){var t,n=this.props,i=n.disableThumbnailScroll,r=n.items,a=this.state,s=a.thumbnailsWrapperWidth,o=a.thumbnailsWrapperHeight,l=this.thumbnails&&this.thumbnails.current;if(i)return 0;if(l){if(this.isThumbnailVertical()){if(l.scrollHeight<=o)return 0;t=l.scrollHeight-o}else{if(l.scrollWidth<=s\|\|s<=0)return 0;t=l.scrollWidth-s}return e(t/(r.length-1))}return 0}},{key:"getAlignmentClassName",value:function(e){var t=this.state.currentIndex,n=this.props,i=n.infinite,r=n.items,a="",s="left",o="right";switch(e){case t-1:a=" ".concat(s);break;case t:a=" ".concat("center");break;case t+1:a=" ".concat(o)}return r.length>=3&&i&&(0===e&&t===r.length-1?a=" ".concat(o):e===r.length-1&&0===t&&(a=" ".concat(s))),a}},{key:"getTranslateXForTwoSlide",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.previousIndex,a=n!==r,s=0===e&&0===r,o=1===e&&1===r,l=0===e&&1===n,u=1===e&&0===n,c=0===i,h=-100n+100e+i;return i>0?this.direction="left":i<0&&(this.direction="right"),u&&i>0&&(h=-100+i),l&&i<0&&(h=100+i),a?s&&c&&"left"===this.direction?h=100:o&&c&&"right"===this.direction&&(h=-100):(u&&c&&"left"===this.direction&&(h=-100),l&&c&&"right"===this.direction&&(h=100)),h}},{key:"getThumbnailBarHeight",value:function(){return this.isThumbnailVertical()?{height:this.state.gallerySlideWrapperHeight}:{}}},{key:"getSlideStyle",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.slideStyle,a=this.props,s=a.infinite,o=a.items,l=a.useTranslate3D,u=a.isRTL,c=-100n,h=o.length-1,d=(c+100e)(u?-1:1)+i;s&&o.length>2&&(0===n&&e===h?d=-100(u?-1:1)+i:n===h&&0===e&&(d=100(u?-1:1)+i)),s&&2===o.length&&(d=this.getTranslateXForTwoSlide(e));var f="translate(".concat(d,"%, 0)");return l&&(f="translate3d(".concat(d,"%, 0, 0)")),U({WebkitTransform:f,MozTransform:f,msTransform:f,OTransform:f,transform:f},r)}},{key:"getCurrentIndex",value:function(){return this.state.currentIndex}},{key:"getThumbnailStyle",value:function(){var e,t=this.props,n=t.useTranslate3D,i=t.isRTL,r=this.state,a=r.thumbsTranslate,s=r.thumbsStyle,o=i?-1a:a;return this.isThumbnailVertical()?(e="translate(0, ".concat(a,"px)"),n&&(e="translate3d(0, ".concat(a,"px, 0)"))):(e="translate(".concat(o,"px, 0)"),n&&(e="translate3d(".concat(o,"px, 0, 0)"))),U({WebkitTransform:e,MozTransform:e,msTransform:e,OTransform:e,transform:e},s)}},{key:"getSlideItems",value:function(){var e=this,n=this.state.currentIndex,i=this.props,r=i.infinite,s=i.items,o=i.slideOnThumbnailOver,l=i.onClick,u=i.lazyLoad,c=i.onTouchMove,h=i.onTouchEnd,d=i.onTouchStart,f=i.onMouseOver,p=i.onMouseLeave,m=i.renderItem,v=i.renderThumbInner,g=i.showThumbnails,b=i.showBullets,y=[],w=[],T=[];return s.forEach((function(i,s){var S=e.getAlignmentClassName(s),O=i.originalClass?" ".concat(i.originalClass):"",E=i.thumbnailClass?" ".concat(i.thumbnailClass):"",x=i.renderItem\|\|m\|\|e.renderItem,I=i.renderThumbInner\|\|v\|\|e.renderThumbInner,k=!u\|\|S\|\|e.lazyLoaded[s];k&&u&&!e.lazyLoaded[s]&&(e.lazyLoaded[s]=!0);var _=e.getSlideStyle(s),P=a().createElement("div",{"aria-label":"Go to Slide ".concat(s+1),key:"slide-".concat(s),tabIndex:"-1",className:"image-gallery-slide ".concat(S," ").concat(O),style:_,onClick:l,onKeyUp:e.handleSlideKeyUp,onTouchMove:c,onTouchEnd:h,onTouchStart:d,onMouseOver:f,onFocus:f,onMouseLeave:p,role:"button"},k?x(i):a().createElement("div",{style:{height:"100%"}}));if(r?e.shouldPushSlideOnInfiniteMode(s)&&y.push(P):y.push(P),g){var M=t("image-gallery-thumbnail",E,{active:n===s});w.push(a().createElement("button",{key:"thumbnail-".concat(s),type:"button",tabIndex:"0","aria-pressed":n===s?"true":"false","aria-label":"Go to Slide ".concat(s+1),className:M,onMouseLeave:o?e.onThumbnailMouseLeave:null,onMouseOver:function(t){return e.handleThumbnailMouseOver(t,s)},onFocus:function(t){return e.handleThumbnailMouseOver(t,s)},onKeyUp:function(t){return e.handleThumbnailKeyUp(t,s)},onClick:function(t){return e.onThumbnailClick(t,s)}},I(i)))}if(b){var L=t("image-gallery-bullet",i.bulletClass,{active:n===s});T.push(a().createElement("button",{type:"button",key:"bullet-".concat(s),className:L,onClick:function(t){return i.bulletOnClick&&i.bulletOnClick({item:i,itemIndex:s,currentIndex:n}),t.target.blur(),e.slideToIndex.call(e,s,t)},"aria-pressed":n===s?"true":"false","aria-label":"Go to Slide ".concat(s+1)}))}})),{slides:y,thumbnails:w,bullets:T}}},{key:"ignoreIsTransitioning",value:function(){var e=this.props.items,t=this.state,n=t.previousIndex,i=t.currentIndex,r=e.length-1;return Math.abs(n-i)>1&&!(0===n&&i===r)&&!(n===r&&0===i)}},{key:"isFirstOrLastSlide",value:function(e){return e===this.props.items.length-1\|\|0===e}},{key:"slideIsTransitioning",value:function(e){var t=this.state,n=t.isTransitioning,i=t.previousIndex,r=t.currentIndex;return n&&!(e===i\|\|e===r)}},{key:"shouldPushSlideOnInfiniteMode",value:function(e){return!this.slideIsTransitioning(e)\|\|this.ignoreIsTransitioning()&&!this.isFirstOrLastSlide(e)}},{key:"slideThumbnailBar",value:function(){var e=this.state,t=e.currentIndex,n=e.isSwipingThumbnail,i=-this.getThumbsTranslate(t);n\|\|(0===t?this.setState({thumbsTranslate:0,thumbsSwipedTranslate:0}):this.setState({thumbsTranslate:i,thumbsSwipedTranslate:i}))}},{key:"canSlide",value:function(){return this.props.items.length>=2}},{key:"canSlideLeft",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t\|\|(n?this.canSlideNext():this.canSlidePrevious())}},{key:"canSlideRight",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t\|\|(n?this.canSlidePrevious():this.canSlideNext())}},{key:"canSlidePrevious",value:function(){return this.state.currentIndex>0}},{key:"canSlideNext",value:function(){return this.state.currentIndex<this.props.items.length-1}},{key:"handleSwiping",value:function(e){var t=e.event,n=e.absX,i=e.dir,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=this.state,l=o.galleryWidth,u=o.isTransitioning;if(!a){var c=this.props.swipingTransitionDuration;if(this.setScrollDirection(i),s&&t.stopPropagation(),u)this.setState({currentSlideOffset:0});else{var h=i===D.RIGHT?1:-1,d=n/l100;Math.abs(d)>=100&&(d=100);var f={transition:"transform ".concat(c,"ms ease-out")};this.setState({currentSlideOffset:hd,slideStyle:f})}}}},{key:"handleThumbnailSwiping",value:function(e){var t,n,i,r,a,s=e.event,o=e.absX,l=e.absY,u=e.dir,c=this.props,h=c.stopPropagation,d=c.swipingThumbnailTransitionDuration,f=this.state,p=f.thumbsSwipedTranslate,m=f.thumbnailsWrapperHeight,v=f.thumbnailsWrapperWidth,g=this.thumbnails&&this.thumbnails.current;if(this.isThumbnailVertical()?(t=p+(u===D.DOWN?l:-l),n=g.scrollHeight-m+20,i=Math.abs(t)>n,r=t>20,a=g.scrollHeight<=m):(t=p+(u===D.RIGHT?o:-o),n=g.scrollWidth-v+20,i=Math.abs(t)>n,r=t>20,a=g.scrollWidth<=v),!a&&(u!==D.LEFT&&u!==D.UP\|\|!i)&&(u!==D.RIGHT&&u!==D.DOWN\|\|!r)){h&&s.stopPropagation();var b={transition:"transform ".concat(d,"ms ease-out")};this.setState({thumbsTranslate:t,thumbsStyle:b})}}},{key:"handleOnThumbnailSwiped",value:function(){var e=this.state.thumbsTranslate,t=this.props.slideDuration;this.setState({isSwipingThumbnail:!0,thumbsSwipedTranslate:e,thumbsStyle:{transition:"all ".concat(t,"ms ease-out")}})}},{key:"sufficientSwipe",value:function(){var e=this.state.currentSlideOffset,t=this.props.swipeThreshold;return Math.abs(e)>t}},{key:"handleOnSwiped",value:function(e){var t=e.event,n=e.dir,i=e.velocity,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=r.flickThreshold,l=this.state,u=l.scrollingUpDown,c=l.scrollingLeftRight;if(!a){var h=this.props.isRTL;s&&t.stopPropagation(),u&&this.setState({scrollingUpDown:!1}),c&&this.setState({scrollingLeftRight:!1});var d=(n===D.LEFT?1:-1)*(h?-1:1),f=n===D.UP\|\|n===D.DOWN,p=i>o&&!f;this.handleOnSwipedTo(d,p)}}},{key:"handleOnSwipedTo",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=i;!this.sufficientSwipe()&&!t\|\|r\|\|(a+=e),(-1===e&&!this.canSlideLeft()\|\|1===e&&!this.canSlideRight())&&(a=i),this.unthrottledSlideToIndex(a)}},{key:"handleMouseDown",value:function(){this.imageGallery.current.classList.add("image-gallery-using-mouse")}},{key:"handleKeyDown",value:function(e){var t=this.props,n=t.disableKeyDown,i=t.useBrowserFullscreen,r=this.state.isFullscreen;if(this.imageGallery.current.classList.remove("image-gallery-using-mouse"),!n)switch(parseInt(e.keyCode\|\|e.which\|\|0,10)){case 37:this.canSlideLeft()&&!this.playPauseIntervalId&&this.slideLeft(e);break;case 39:this.canSlideRight()&&!this.playPauseIntervalId&&this.slideRight(e);break;case 27:r&&!i&&this.exitFullScreen()}}},{key:"handleImageError",value:function(e){var t=this.props.onErrorImageURL;t&&-1===e.target.src.indexOf(t)&&(e.target.src=t)}},{key:"removeResizeObserver",value:function(){this.resizeObserver&&this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&(this.resizeObserver.unobserve(this.imageGallerySlideWrapper.current),this.resizeObserver=null)}},{key:"handleResize",value:function(){var e=this.state.currentIndex;this.resizeObserver&&(this.imageGallery&&this.imageGallery.current&&this.setState({galleryWidth:this.imageGallery.current.offsetWidth}),this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&this.setState({gallerySlideWrapperHeight:this.imageGallerySlideWrapper.current.offsetHeight}),this.thumbnailsWrapper&&this.thumbnailsWrapper.current&&(this.isThumbnailVertical()?this.setState({thumbnailsWrapperHeight:this.thumbnailsWrapper.current.offsetHeight}):this.setState({thumbnailsWrapperWidth:this.thumbnailsWrapper.current.offsetWidth})),this.setThumbsTranslate(-this.getThumbsTranslate(e)))}},{key:"initResizeObserver",value:function(e){var t=this;this.resizeObserver=new R(u()((function(e){e&&e.forEach((function(){t.handleResize()}))}),300)),this.resizeObserver.observe(e.current)}},{key:"toggleFullScreen",value:function(){this.state.isFullscreen?this.exitFullScreen():this.fullScreen()}},{key:"togglePlay",value:function(){this.playPauseIntervalId?this.pause():this.play()}},{key:"handleScreenChange",value:function(){var e=this.props,t=e.onScreenChange,n=e.useBrowserFullscreen,i=document.fullscreenElement\|\|document.msFullscreenElement\|\|document.mozFullScreenElement\|\|document.webkitFullscreenElement,r=this.imageGallery.current===i;t&&t(r),n&&this.setState({isFullscreen:r})}},{key:"slideToIndex",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=this.props,s=a.items,o=a.slideDuration,l=a.onBeforeSlide;if(!r){t&&this.playPauseIntervalId&&(this.pause(!1),this.play(!1));var u=s.length-1,c=e;e<0?c=u:e>u&&(c=0),l&&c!==i&&l(c),this.setState({previousIndex:i,currentIndex:c,isTransitioning:c!==i,currentSlideOffset:0,slideStyle:{transition:"all ".concat(o,"ms ease-out")}},this.onSliding)}}},{key:"slideLeft",value:function(e){this.props.isRTL?this.slideNext(e):this.slidePrevious(e)}},{key:"slideRight",value:function(e){this.props.isRTL?this.slidePrevious(e):this.slideNext(e)}},{key:"slidePrevious",value:function(e){var t=this,n=this.state,i=n.currentIndex,r=n.currentSlideOffset,a=n.isTransitioning,s=this.props.items,o=i-1;a\|\|(2===s.length?this.setState({currentSlideOffset:r+.001,slideStyle:{transition:"none"}},(function(){window.setTimeout((function(){return t.slideToIndex(o,e)}),25)})):this.slideToIndex(o,e))}},{key:"slideNext",value:function(e){var t=this,n=this.state,i=n.currentIndex,r=n.currentSlideOffset,a=n.isTransitioning,s=this.props.items,o=i+1;a\|\|(2===s.length?this.setState({currentSlideOffset:r-.001,slideStyle:{transition:"none"}},(function(){window.setTimeout((function(){return t.slideToIndex(o,e)}),25)})):this.slideToIndex(o,e))}},{key:"handleThumbnailMouseOver",value:function(e,t){this.props.slideOnThumbnailOver&&this.onThumbnailMouseOver(e,t)}},{key:"handleThumbnailKeyUp",value:function(e,t){Q(e)&&this.onThumbnailClick(e,t)}},{key:"handleSlideKeyUp",value:function(e){Q(e)&&(0,this.props.onClick)(e)}},{key:"isThumbnailVertical",value:function(){var e=this.props.thumbnailPosition;return"left"===e\|\|"right"===e}},{key:"addScreenChangeEvent",value:function(){var e=this;$.forEach((function(t){document.addEventListener(t,e.handleScreenChange)}))}},{key:"removeScreenChangeEvent",value:function(){var e=this;$.forEach((function(t){document.removeEventListener(t,e.handleScreenChange)}))}},{key:"fullScreen",value:function(){var e=this.props.useBrowserFullscreen,t=this.imageGallery.current;e?t.requestFullscreen?t.requestFullscreen():t.msRequestFullscreen?t.msRequestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():this.setModalFullscreen(!0):this.setModalFullscreen(!0),this.setState({isFullscreen:!0})}},{key:"exitFullScreen",value:function(){var e=this.state.isFullscreen,t=this.props.useBrowserFullscreen;e&&(t?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen?document.msExitFullscreen():this.setModalFullscreen(!1):this.setModalFullscreen(!1),this.setState({isFullscreen:!1}))}},{key:"pauseOrPlay",value:function(){var e=this.props.infinite,t=this.state.currentIndex;e\|\|this.canSlideRight()?this.slideToIndex(t+1):this.pause()}},{key:"play",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])\|\|arguments[0],t=this.props,n=t.onPlay,i=t.slideInterval,r=t.slideDuration,a=this.state.currentIndex;this.playPauseIntervalId\|\|(this.setState({isPlaying:!0}),this.playPauseIntervalId=window.setInterval(this.pauseOrPlay,Math.max(i,r)),n&&e&&n(a))}},{key:"pause",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])\|\|arguments[0],t=this.props.onPause,n=this.state.currentIndex;this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null,this.setState({isPlaying:!1}),t&&e&&t(n))}},{key:"isImageLoaded",value:function(e){return!!this.loadedImages[e.original]\|\|(this.loadedImages[e.original]=!0,!1)}},{key:"handleImageLoaded",value:function(e,t){var n=this.props.onImageLoad;!this.loadedImages[t.original]&&n&&(this.loadedImages[t.original]=!0,n(e))}},{key:"renderItem",value:function(e){var t=this,n=this.state.isFullscreen,i=this.props.onImageError\|\|this.handleImageError,r=n&&e.fullscreen\|\|e.original;return a().createElement("div",null,e.imageSet?a().createElement("picture",{onLoad:function(n){return t.handleImageLoaded(n,e)},onError:i},e.imageSet.map((function(e,t){return a().createElement("source",{key:"media-".concat(t),media:e.media,srcSet:e.srcSet,type:e.type})})),a().createElement("img",{className:"image-gallery-image",alt:e.originalAlt,src:r,height:e.originalHeight,width:e.originalWidth})):a().createElement("img",{className:"image-gallery-image",src:r,alt:e.originalAlt,srcSet:e.srcSet,height:e.originalHeight,width:e.originalWidth,sizes:e.sizes,title:e.originalTitle,onLoad:function(n){return t.handleImageLoaded(n,e)},onError:i}),e.description&&a().createElement("span",{className:"image-gallery-description"},e.description))}},{key:"renderThumbInner",value:function(e){var t=this.props.onThumbnailError\|\|this.handleImageError;return a().createElement("span",{className:"image-gallery-thumbnail-inner"},a().createElement("img",{className:"image-gallery-thumbnail-image",src:e.thumbnail,height:e.thumbnailHeight,width:e.thumbnailWidth,alt:e.thumbnailAlt,title:e.thumbnailTitle,onError:t}),e.thumbnailLabel&&a().createElement("div",{className:"image-gallery-thumbnail-label"},e.thumbnailLabel))}},{key:"render",value:function(){var e=this.state,n=e.currentIndex,i=e.isFullscreen,r=e.modalFullscreen,s=e.isPlaying,o=this.props,l=o.additionalClass,u=o.disableThumbnailSwipe,c=o.indexSeparator,h=o.isRTL,d=o.items,f=o.thumbnailPosition,p=o.renderFullscreenButton,m=o.renderCustomControls,v=o.renderLeftNav,g=o.renderRightNav,b=o.showBullets,y=o.showFullscreenButton,w=o.showIndex,T=o.showThumbnails,S=o.showNav,O=o.showPlayButton,E=o.renderPlayPauseButton,x=this.getThumbnailStyle(),I=this.getSlideItems(),k=I.slides,_=I.thumbnails,P=I.bullets,M=t("image-gallery-slide-wrapper",f,{"image-gallery-rtl":h}),L=a().createElement("div",{ref:this.imageGallerySlideWrapper,className:M},m&&m(),this.canSlide()?a().createElement(a().Fragment,null,S&&a().createElement(a().Fragment,null,v(this.slideLeft,!this.canSlideLeft()),g(this.slideRight,!this.canSlideRight())),a().createElement(B,{className:"image-gallery-swipe",delta:0,onSwiping:this.handleSwiping,onSwiped:this.handleOnSwiped},a().createElement("div",{className:"image-gallery-slides"},k))):a().createElement("div",{className:"image-gallery-slides"},k),O&&E(this.togglePlay,s),b&&a().createElement("div",{className:"image-gallery-bullets"},a().createElement("div",{className:"image-gallery-bullets-container",role:"navigation","aria-label":"Bullet Navigation"},P)),y&&p(this.toggleFullScreen,i),w&&a().createElement("div",{className:"image-gallery-index"},a().createElement("span",{className:"image-gallery-index-current"},n+1),a().createElement("span",{className:"image-gallery-index-separator"},c),a().createElement("span",{className:"image-gallery-index-total"},d.length))),R=t("image-gallery",l,{"fullscreen-modal":r}),D=t("image-gallery-content",f,{fullscreen:i}),F=t("image-gallery-thumbnails-wrapper",f,{"thumbnails-wrapper-rtl":!this.isThumbnailVertical()&&h},{"thumbnails-swipe-horizontal":!this.isThumbnailVertical()&&!u},{"thumbnails-swipe-vertical":this.isThumbnailVertical()&&!u});return a().createElement("div",{ref:this.imageGallery,className:R,"aria-live":"polite"},a().createElement("div",{className:D},("bottom"===f\|\|"right"===f)&&L,T&&a().createElement(B,{className:F,delta:0,onSwiping:!u&&this.handleThumbnailSwiping,onSwiped:!u&&this.handleOnThumbnailSwiped},a().createElement("div",{className:"image-gallery-thumbnails",ref:this.thumbnailsWrapper,style:this.getThumbnailBarHeight()},a().createElement("div",{ref:this.thumbnails,className:"image-gallery-thumbnails-container",style:x,"aria-label":"Thumbnail Navigation"},_))),("top"===f\|\|"left"===f)&&L))}}])&&K(n.prototype,i),c}(a().Component);Z.propTypes={flickThreshold:F.number,items:(0,F.arrayOf)((0,F.shape)({bulletClass:F.string,bulletOnClick:F.func,description:F.string,original:F.string,originalHeight:F.number,originalWidth:F.number,thumbnailHeight:F.number,thumbnailWidth:F.number,fullscreen:F.string,originalAlt:F.string,originalTitle:F.string,thumbnail:F.string,thumbnailAlt:F.string,thumbnailLabel:F.string,thumbnailTitle:F.string,originalClass:F.string,thumbnailClass:F.string,renderItem:F.func,renderThumbInner:F.func,imageSet:J,srcSet:F.string,sizes:F.string})).isRequired,showNav:F.bool,autoPlay:F.bool,lazyLoad:F.bool,infinite:F.bool,showIndex:F.bool,showBullets:F.bool,showThumbnails:F.bool,showPlayButton:F.bool,showFullscreenButton:F.bool,disableThumbnailScroll:F.bool,disableKeyDown:F.bool,disableSwipe:F.bool,disableThumbnailSwipe:F.bool,useBrowserFullscreen:F.bool,onErrorImageURL:F.string,indexSeparator:F.string,thumbnailPosition:(0,F.oneOf)(["top","bottom","left","right"]),startIndex:F.number,slideDuration:F.number,slideInterval:F.number,slideOnThumbnailOver:F.bool,swipeThreshold:F.number,swipingTransitionDuration:F.number,swipingThumbnailTransitionDuration:F.number,onSlide:F.func,onBeforeSlide:F.func,onScreenChange:F.func,onPause:F.func,onPlay:F.func,onClick:F.func,onImageLoad:F.func,onImageError:F.func,onTouchMove:F.func,onTouchEnd:F.func,onTouchStart:F.func,onMouseOver:F.func,onMouseLeave:F.func,onThumbnailError:F.func,onThumbnailClick:F.func,renderCustomControls:F.func,renderLeftNav:F.func,renderRightNav:F.func,renderPlayPauseButton:F.func,renderFullscreenButton:F.func,renderItem:F.func,renderThumbInner:F.func,stopPropagation:F.bool,additionalClass:F.string,useTranslate3D:F.bool,isRTL:F.bool,useWindowKeyDown:F.bool},Z.defaultProps={onErrorImageURL:"",additionalClass:"",showNav:!0,autoPlay:!1,lazyLoad:!1,infinite:!0,showIndex:!1,showBullets:!1,showThumbnails:!0,showPlayButton:!0,showFullscreenButton:!0,disableThumbnailScroll:!1,disableKeyDown:!1,disableSwipe:!1,disableThumbnailSwipe:!1,useTranslate3D:!0,isRTL:!1,useBrowserFullscreen:!0,flickThreshold:.4,stopPropagation:!1,indexSeparator:" / ",thumbnailPosition:"bottom",startIndex:0,slideDuration:450,swipingTransitionDuration:0,swipingThumbnailTransitionDuration:0,onSlide:null,onBeforeSlide:null,onScreenChange:null,onPause:null,onPlay:null,onClick:null,onImageLoad:null,onImageError:null,onTouchMove:null,onTouchEnd:null,onTouchStart:null,onMouseOver:null,onMouseLeave:null,onThumbnailError:null,onThumbnailClick:null,renderCustomControls:null,renderThumbInner:null,renderItem:null,slideInterval:3e3,slideOnThumbnailOver:!1,swipeThreshold:30,renderLeftNav:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-left-nav",disabled:t,onClick:e,"aria-label":"Previous Slide"},a().createElement(N,{icon:"left",viewBox:"6 0 12 24"}))},renderRightNav:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-right-nav",disabled:t,onClick:e,"aria-label":"Next Slide"},a().createElement(N,{icon:"right",viewBox:"6 0 12 24"}))},renderPlayPauseButton:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-play-button",onClick:e,"aria-label":"Play or Pause Slideshow"},a().createElement(N,{strokeWidth:2,icon:t?"pause":"play"}))},renderFullscreenButton:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-fullscreen-button",onClick:e,"aria-label":"Open Fullscreen"},a().createElement(N,{strokeWidth:2,icon:t?"minimize":"maximize"}))},useWindowKeyDown:!0};const ee=Z})(),r})()}));

package.json

		{
		"name": "react-image-gallery",
		"version": "1.1.1",
		"version": "1.2.0",
		"description": "React carousel image gallery component with thumbnail and mobile support",
		"main": "./build/image-gallery.js",
		"scripts": {
		"start": "gulp dev",
		"test": "jest",
		"build": "yarn test && gulp build",
		"lint": "eslint --ext .js,.jsx src"
		"lint": "eslint --ext .js,.jsx src",
		"start": "webpack serve --open --hot --mode development",
		"build": "webpack --config webpack.build.js"
		},
		"engines": {
		"node": "<12"
		},
		"repository": {
		@@ -24,2 +21,5 @@ "type": "git",
		},
		"engines": {
		"node": ">=12.13"
		},
		"style": "styles/css/image-gallery.css",
		@@ -50,36 +50,34 @@ "keywords": [
		"devDependencies": {
		"@babel/core": "^7.13.8",
		"@babel/plugin-proposal-class-properties": "^7.13.0",
		"@babel/preset-env": "^7.13.9",
		"@babel/preset-react": "^7.12.13",
		"babel-eslint": "^10.0.2",
		"babel-jest": "^26.6.3",
		"babel-plugin-transform-object-assign": "^6.8.0",
		"babel-preset-es2015": "^6.6.0",
		"babel-preset-react": "^6.5.0",
		"babel-preset-stage-0": "^6.16.0",
		"babelify": "^7.3.0",
		"browserify": "^13.1.1",
		"@babel/core": "^7.13.14",
		"@babel/preset-env": "^7.13.12",
		"@babel/preset-react": "^7.13.13",
		"babel-eslint": "^10.1.0",
		"babel-loader": "^8.2.2",
		"clsx": "^1.0.4",
		"css-loader": "^5.2.0",
		"enzyme": "^3.11.0",
		"enzyme-adapter-react-16": "^1.15.6",
		"eslint": "^5.4.0",
		"eslint-config-airbnb": "^17.1.1",
		"eslint-plugin-import": "^2.18.0",
		"eslint-plugin-jsx-a11y": "^6.2.3",
		"eslint-plugin-react": "^7.14.2",
		"gulp": "^3.8.11",
		"gulp-babel": "^6.1.2",
		"gulp-clean-css": "^2.3.1",
		"gulp-concat": "^2.6.0",
		"gulp-connect": "^5.7.0",
		"gulp-livereload": "^3.8.0",
		"gulp-rename": "^1.2.0",
		"gulp-sass": "^4.1.0",
		"gulp-uglify": "^1.5.3",
		"eslint": "^7.23.0",
		"eslint-plugin-react": "^7.23.1",
		"file-loader": "^6.2.0",
		"jest": "^26.6.3",
		"lodash.debounce": "^4.0.8",
		"lodash.throttle": "^4.1.1",
		"mini-css-extract-plugin": "^2.1.0",
		"postcss": "^8.2.10",
		"postcss-loader": "^5.2.0",
		"prop-types": "^15.5.8",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"vinyl-buffer": "^1.0.0",
		"vinyl-source-stream": "^1.1.0",
		"watchify": "^3.8.0"
		"react-fast-compare": "^3.2.0",
		"react-swipeable": "6.0.1",
		"remove-files-webpack-plugin": "^1.4.5",
		"resize-observer-polyfill": "^1.5.0",
		"sass": "^1.35.2",
		"sass-loader": "^12.1.0",
		"style-loader": "^2.0.0",
		"url-loader": "^4.1.1",
		"webpack": "^5.30.0",
		"webpack-cli": "^4.6.0",
		"webpack-dev-server": "^3.11.2"
		},
		@@ -89,11 +87,3 @@ "peerDependencies": {
		},
		"dependencies": {
		"clsx": "^1.0.4",
		"lodash.debounce": "^4.0.8",
		"lodash.isequal": "^4.5.0",
		"lodash.throttle": "^4.1.1",
		"prop-types": "^15.5.8",
		"react-swipeable": "6.0.1",
		"resize-observer-polyfill": "^1.5.0"
		}
		"dependencies": {}
		}

README.md

		@@ -119,2 +119,3 @@ React Image Gallery
		* `disableSwipe`: Boolean, default `false`
		* `disableThumbnailSwipe`: Boolean, default `false`
		* `onErrorImageURL`: String, default `undefined`
		@@ -258,2 +259,3 @@ * an image src pointing to your default image if an image fails to load
		cd react-image-gallery
		npm install --global yarn
		yarn install
		@@ -260,0 +262,0 @@ yarn start

506

src/ImageGallery.js

		import clsx from 'clsx';
		import React from 'react';
		import throttle from 'lodash.throttle';
		import debounce from 'lodash.debounce';
		import isEqual from 'lodash.isequal';
		import throttle from 'lodash/throttle';
		import debounce from 'lodash/debounce';
		import isEqual from 'react-fast-compare';
		import ResizeObserver from 'resize-observer-polyfill';
		@@ -22,4 +22,4 @@ import {
		} from 'prop-types';
		import SVG from './SVG';
		import SwipeWrapper from './SwipeWrapper';
		import SVG from 'src/SVG';
		import SwipeWrapper from 'src/SwipeWrapper';

		@@ -45,171 +45,3 @@ const screenChangeEvents = [

		export default class ImageGallery extends React.Component {
		static propTypes = {
		flickThreshold: number,
		items: arrayOf(shape({
		bulletClass: string,
		bulletOnClick: func,
		description: string,
		original: string,
		originalHeight: number,
		originalWidth: number,
		thumbnailHeight: number,
		thumbnailWidth: number,
		fullscreen: string,
		originalAlt: string,
		originalTitle: string,
		thumbnail: string,
		thumbnailAlt: string,
		thumbnailLabel: string,
		thumbnailTitle: string,
		originalClass: string,
		thumbnailClass: string,
		renderItem: func,
		renderThumbInner: func,
		imageSet: imageSetType,
		srcSet: string,
		sizes: string,
		})).isRequired,
		showNav: bool,
		autoPlay: bool,
		lazyLoad: bool,
		infinite: bool,
		showIndex: bool,
		showBullets: bool,
		showThumbnails: bool,
		showPlayButton: bool,
		showFullscreenButton: bool,
		disableThumbnailScroll: bool,
		disableKeyDown: bool,
		disableSwipe: bool,
		useBrowserFullscreen: bool,
		onErrorImageURL: string,
		indexSeparator: string,
		thumbnailPosition: oneOf(['top', 'bottom', 'left', 'right']),
		startIndex: number,
		slideDuration: number,
		slideInterval: number,
		slideOnThumbnailOver: bool,
		swipeThreshold: number,
		swipingTransitionDuration: number,
		onSlide: func,
		onBeforeSlide: func,
		onScreenChange: func,
		onPause: func,
		onPlay: func,
		onClick: func,
		onImageLoad: func,
		onImageError: func,
		onTouchMove: func,
		onTouchEnd: func,
		onTouchStart: func,
		onMouseOver: func,
		onMouseLeave: func,
		onThumbnailError: func,
		onThumbnailClick: func,
		renderCustomControls: func,
		renderLeftNav: func,
		renderRightNav: func,
		renderPlayPauseButton: func,
		renderFullscreenButton: func,
		renderItem: func,
		renderThumbInner: func,
		stopPropagation: bool,
		additionalClass: string,
		useTranslate3D: bool,
		isRTL: bool,
		useWindowKeyDown: bool,
		};

		static defaultProps = {
		onErrorImageURL: '',
		additionalClass: '',
		showNav: true,
		autoPlay: false,
		lazyLoad: false,
		infinite: true,
		showIndex: false,
		showBullets: false,
		showThumbnails: true,
		showPlayButton: true,
		showFullscreenButton: true,
		disableThumbnailScroll: false,
		disableKeyDown: false,
		disableSwipe: false,
		useTranslate3D: true,
		isRTL: false,
		useBrowserFullscreen: true,
		flickThreshold: 0.4,
		stopPropagation: false,
		indexSeparator: ' / ',
		thumbnailPosition: 'bottom',
		startIndex: 0,
		slideDuration: 450,
		swipingTransitionDuration: 0,
		onSlide: null,
		onBeforeSlide: null,
		onScreenChange: null,
		onPause: null,
		onPlay: null,
		onClick: null,
		onImageLoad: null,
		onImageError: null,
		onTouchMove: null,
		onTouchEnd: null,
		onTouchStart: null,
		onMouseOver: null,
		onMouseLeave: null,
		onThumbnailError: null,
		onThumbnailClick: null,
		renderCustomControls: null,
		renderThumbInner: null,
		renderItem: null,
		slideInterval: 3000,
		slideOnThumbnailOver: false,
		swipeThreshold: 30,
		renderLeftNav: (onClick, disabled) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-left-nav"
		disabled={disabled}
		onClick={onClick}
		aria-label="Previous Slide"
		>
		<SVG icon="left" viewBox="6 0 12 24" />
		</button>
		),
		renderRightNav: (onClick, disabled) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-right-nav"
		disabled={disabled}
		onClick={onClick}
		aria-label="Next Slide"
		>
		<SVG icon="right" viewBox="6 0 12 24" />
		</button>
		),
		renderPlayPauseButton: (onClick, isPlaying) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-play-button"
		onClick={onClick}
		aria-label="Play or Pause Slideshow"
		>
		<SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
		</button>
		),
		renderFullscreenButton: (onClick, isFullscreen) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-fullscreen-button"
		onClick={onClick}
		aria-label="Open Fullscreen"
		>
		<SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
		</button>
		),
		useWindowKeyDown: true,
		};

		class ImageGallery extends React.Component {
		constructor(props) {
		@@ -220,2 +52,3 @@ super(props);
		thumbsTranslate: 0,
		thumbsSwipedTranslate: 0,
		currentSlideOffset: 0,
		@@ -225,3 +58,5 @@ galleryWidth: 0,
		thumbnailsWrapperHeight: 0,
		thumbsStyle: { transition: `all ${props.slideDuration}ms ease-out` },
		isFullscreen: false,
		isSwipingThumbnail: false,
		isPlaying: false,
		@@ -241,2 +76,4 @@ };
		this.handleSwiping = this.handleSwiping.bind(this);
		this.handleThumbnailSwiping = this.handleThumbnailSwiping.bind(this);
		this.handleOnThumbnailSwiped = this.handleOnThumbnailSwiped.bind(this);
		this.onThumbnailMouseLeave = this.onThumbnailMouseLeave.bind(this);
		@@ -312,3 +149,3 @@ this.handleImageError = this.handleImageError.bind(this);
		if (prevState.currentIndex !== currentIndex) {
		this.slideThumbnailBar(prevState.currentIndex);
		this.slideThumbnailBar();
		}
		@@ -365,3 +202,8 @@ // if slideDuration changes, update slideToIndex throttle
		if (isTransitioning) {
		this.setState({ isTransitioning: !isTransitioning });
		this.setState({
		isTransitioning: !isTransitioning,
		// reset swiping thumbnail after transitioning to new slide,
		// so we can resume thumbnail auto translate
		isSwipingThumbnail: false,
		});
		if (onSlide) {
		@@ -435,18 +277,18 @@ onSlide(currentIndex);
		let totalScroll;
		const thumbElement = this.thumbnails && this.thumbnails.current;
		const thumbsElement = this.thumbnails && this.thumbnails.current;

		if (disableThumbnailScroll) return 0;

		if (thumbElement) {
		if (thumbsElement) {
		// total scroll required to see the last thumbnail
		if (this.isThumbnailVertical()) {
		if (thumbElement.scrollHeight <= thumbnailsWrapperHeight) {
		if (thumbsElement.scrollHeight <= thumbnailsWrapperHeight) {
		return 0;
		}
		totalScroll = thumbElement.scrollHeight - thumbnailsWrapperHeight;
		totalScroll = thumbsElement.scrollHeight - thumbnailsWrapperHeight;
		} else {
		if (thumbElement.scrollWidth <= thumbnailsWrapperWidth \|\| thumbnailsWrapperWidth <= 0) {
		if (thumbsElement.scrollWidth <= thumbnailsWrapperWidth \|\| thumbnailsWrapperWidth <= 0) {
		return 0;
		}
		totalScroll = thumbElement.scrollWidth - thumbnailsWrapperWidth;
		totalScroll = thumbsElement.scrollWidth - thumbnailsWrapperWidth;
		}
		@@ -592,3 +434,3 @@ // scroll-x required per index change

		return Object.assign({}, {
		return {
		WebkitTransform: translate,
		@@ -599,3 +441,4 @@ MozTransform: translate,
		transform: translate,
		}, slideStyle);
		...slideStyle
		};
		}
		@@ -611,3 +454,3 @@
		const { useTranslate3D, isRTL } = this.props;
		const { thumbsTranslate } = this.state;
		const { thumbsTranslate, thumbsStyle } = this.state;
		const verticalTranslateValue = isRTL ? thumbsTranslate * -1 : thumbsTranslate;
		@@ -632,2 +475,3 @@
		transform: translate,
		...thumbsStyle,
		};
		@@ -772,2 +616,3 @@ }
		const totalSlides = items.length - 1;

		// we want to show the in between slides transition
		@@ -819,16 +664,16 @@ const slidingMoreThanOneSlideLeftOrRight = Math.abs(previousIndex - currentIndex) > 1;

		slideThumbnailBar(previousIndex) {
		const { thumbsTranslate, currentIndex } = this.state;
		slideThumbnailBar() {
		const { currentIndex, isSwipingThumbnail } = this.state;
		const nextTranslate = -this.getThumbsTranslate(currentIndex);
		if (isSwipingThumbnail) {
		return;
		}

		if (currentIndex === 0) {
		this.setThumbsTranslate(0);
		this.setState({ thumbsTranslate: 0, thumbsSwipedTranslate: 0 });
		} else {
		const indexDifference = Math.abs(previousIndex - currentIndex);
		const scroll = this.getThumbsTranslate(indexDifference);
		if (scroll > 0) {
		if (previousIndex < currentIndex) {
		this.setThumbsTranslate(thumbsTranslate - scroll);
		} else if (previousIndex > currentIndex) {
		this.setThumbsTranslate(thumbsTranslate + scroll);
		}
		}
		this.setState({
		thumbsTranslate: nextTranslate,
		thumbsSwipedTranslate: nextTranslate,
		});
		}
		@@ -899,2 +744,81 @@ }

		handleThumbnailSwiping({
		event,
		absX,
		absY,
		dir,
		}) {
		const {
		stopPropagation,
		swipingThumbnailTransitionDuration,
		} = this.props;
		const {
		thumbsSwipedTranslate,
		thumbnailsWrapperHeight,
		thumbnailsWrapperWidth,
		} = this.state;
		const thumbsElement = this.thumbnails && this.thumbnails.current;
		const emptySpaceMargin = 20; // 20px to add some margin to show empty space

		let thumbsTranslate;
		let totalSwipeableLength;
		let hasSwipedPassedEnd;
		let hasSwipedPassedStart;
		let isThumbnailBarSmallerThanContainer;

		if (this.isThumbnailVertical()) {
		const slideY = dir === DOWN ? absY : -absY;
		thumbsTranslate = thumbsSwipedTranslate + slideY;
		totalSwipeableLength = thumbsElement.scrollHeight
		- thumbnailsWrapperHeight + emptySpaceMargin;
		hasSwipedPassedEnd = Math.abs(thumbsTranslate) > totalSwipeableLength;
		hasSwipedPassedStart = thumbsTranslate > emptySpaceMargin;
		isThumbnailBarSmallerThanContainer = thumbsElement.scrollHeight <= thumbnailsWrapperHeight;
		} else {
		const slideX = dir === RIGHT ? absX : -absX;
		thumbsTranslate = thumbsSwipedTranslate + slideX;
		totalSwipeableLength = thumbsElement.scrollWidth
		- thumbnailsWrapperWidth + emptySpaceMargin;
		hasSwipedPassedEnd = Math.abs(thumbsTranslate) > totalSwipeableLength;
		hasSwipedPassedStart = thumbsTranslate > emptySpaceMargin;
		isThumbnailBarSmallerThanContainer = thumbsElement.scrollWidth <= thumbnailsWrapperWidth;
		}

		if (isThumbnailBarSmallerThanContainer) {
		// no need to swipe a thumbnail bar smaller/shorter than its container
		return;
		}

		if ((dir === LEFT \|\| dir === UP) && hasSwipedPassedEnd) {
		// prevent further swipeing
		return;
		}

		if ((dir === RIGHT \|\| dir === DOWN) && hasSwipedPassedStart) {
		// prevent further swipeing
		return;
		}

		if (stopPropagation) event.stopPropagation();

		const swipingTransition = {
		transition: `transform ${swipingThumbnailTransitionDuration}ms ease-out`,
		};

		this.setState({
		thumbsTranslate,
		thumbsStyle: swipingTransition,
		});
		}

		handleOnThumbnailSwiped() {
		const { thumbsTranslate } = this.state;
		const { slideDuration } = this.props;
		this.setState({
		isSwipingThumbnail: true,
		thumbsSwipedTranslate: thumbsTranslate,
		thumbsStyle: { transition: `all ${slideDuration}ms ease-out` },
		});
		}

		sufficientSwipe() {
		@@ -1417,2 +1341,3 @@ const { currentSlideOffset } = this.state;
		additionalClass,
		disableThumbnailSwipe,
		indexSeparator, // deprecate soon, and allow custom render
		@@ -1513,2 +1438,4 @@ isRTL,
		{ 'thumbnails-wrapper-rtl': !this.isThumbnailVertical() && isRTL },
		{ 'thumbnails-swipe-horizontal': !this.isThumbnailVertical() && !disableThumbnailSwipe },
		{ 'thumbnails-swipe-vertical': this.isThumbnailVertical() && !disableThumbnailSwipe },
		);
		@@ -1525,4 +1452,9 @@ return (
		showThumbnails && (
		<div className={thumbnailWrapperClass} style={this.getThumbnailBarHeight()}>
		<div className="image-gallery-thumbnails" ref={this.thumbnailsWrapper}>
		<SwipeWrapper
		className={thumbnailWrapperClass}
		delta={0}
		onSwiping={!disableThumbnailSwipe && this.handleThumbnailSwiping}
		onSwiped={!disableThumbnailSwipe && this.handleOnThumbnailSwiped}
		>
		<div className="image-gallery-thumbnails" ref={this.thumbnailsWrapper} style={this.getThumbnailBarHeight()}>
		<div
		@@ -1537,3 +1469,3 @@ ref={this.thumbnails}
		</div>
		</div>
		</SwipeWrapper>
		)
		@@ -1548,1 +1480,175 @@ }
		}

		ImageGallery.propTypes = {
		flickThreshold: number,
		items: arrayOf(shape({
		bulletClass: string,
		bulletOnClick: func,
		description: string,
		original: string,
		originalHeight: number,
		originalWidth: number,
		thumbnailHeight: number,
		thumbnailWidth: number,
		fullscreen: string,
		originalAlt: string,
		originalTitle: string,
		thumbnail: string,
		thumbnailAlt: string,
		thumbnailLabel: string,
		thumbnailTitle: string,
		originalClass: string,
		thumbnailClass: string,
		renderItem: func,
		renderThumbInner: func,
		imageSet: imageSetType,
		srcSet: string,
		sizes: string,
		})).isRequired,
		showNav: bool,
		autoPlay: bool,
		lazyLoad: bool,
		infinite: bool,
		showIndex: bool,
		showBullets: bool,
		showThumbnails: bool,
		showPlayButton: bool,
		showFullscreenButton: bool,
		disableThumbnailScroll: bool,
		disableKeyDown: bool,
		disableSwipe: bool,
		disableThumbnailSwipe: bool,
		useBrowserFullscreen: bool,
		onErrorImageURL: string,
		indexSeparator: string,
		thumbnailPosition: oneOf(['top', 'bottom', 'left', 'right']),
		startIndex: number,
		slideDuration: number,
		slideInterval: number,
		slideOnThumbnailOver: bool,
		swipeThreshold: number,
		swipingTransitionDuration: number,
		swipingThumbnailTransitionDuration: number,
		onSlide: func,
		onBeforeSlide: func,
		onScreenChange: func,
		onPause: func,
		onPlay: func,
		onClick: func,
		onImageLoad: func,
		onImageError: func,
		onTouchMove: func,
		onTouchEnd: func,
		onTouchStart: func,
		onMouseOver: func,
		onMouseLeave: func,
		onThumbnailError: func,
		onThumbnailClick: func,
		renderCustomControls: func,
		renderLeftNav: func,
		renderRightNav: func,
		renderPlayPauseButton: func,
		renderFullscreenButton: func,
		renderItem: func,
		renderThumbInner: func,
		stopPropagation: bool,
		additionalClass: string,
		useTranslate3D: bool,
		isRTL: bool,
		useWindowKeyDown: bool,
		};

		ImageGallery.defaultProps = {
		onErrorImageURL: '',
		additionalClass: '',
		showNav: true,
		autoPlay: false,
		lazyLoad: false,
		infinite: true,
		showIndex: false,
		showBullets: false,
		showThumbnails: true,
		showPlayButton: true,
		showFullscreenButton: true,
		disableThumbnailScroll: false,
		disableKeyDown: false,
		disableSwipe: false,
		disableThumbnailSwipe: false,
		useTranslate3D: true,
		isRTL: false,
		useBrowserFullscreen: true,
		flickThreshold: 0.4,
		stopPropagation: false,
		indexSeparator: ' / ',
		thumbnailPosition: 'bottom',
		startIndex: 0,
		slideDuration: 450,
		swipingTransitionDuration: 0,
		swipingThumbnailTransitionDuration: 0,
		onSlide: null,
		onBeforeSlide: null,
		onScreenChange: null,
		onPause: null,
		onPlay: null,
		onClick: null,
		onImageLoad: null,
		onImageError: null,
		onTouchMove: null,
		onTouchEnd: null,
		onTouchStart: null,
		onMouseOver: null,
		onMouseLeave: null,
		onThumbnailError: null,
		onThumbnailClick: null,
		renderCustomControls: null,
		renderThumbInner: null,
		renderItem: null,
		slideInterval: 3000,
		slideOnThumbnailOver: false,
		swipeThreshold: 30,
		renderLeftNav: (onClick, disabled) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-left-nav"
		disabled={disabled}
		onClick={onClick}
		aria-label="Previous Slide"
		>
		<SVG icon="left" viewBox="6 0 12 24" />
		</button>
		),
		renderRightNav: (onClick, disabled) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-right-nav"
		disabled={disabled}
		onClick={onClick}
		aria-label="Next Slide"
		>
		<SVG icon="right" viewBox="6 0 12 24" />
		</button>
		),
		renderPlayPauseButton: (onClick, isPlaying) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-play-button"
		onClick={onClick}
		aria-label="Play or Pause Slideshow"
		>
		<SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
		</button>
		),
		renderFullscreenButton: (onClick, isFullscreen) => (
		<button
		type="button"
		className="image-gallery-icon image-gallery-fullscreen-button"
		onClick={onClick}
		aria-label="Open Fullscreen"
		>
		<SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
		</button>
		),
		useWindowKeyDown: true,
		};

		export default ImageGallery;

babel.config.js

build/SVG.js

build/SwipeWrapper.js

gulpfile.js

styles/css/image-gallery.css

Sorry, the diff of this file is not supported yet

styles/scss/image-gallery.scss

Sorry, the diff of this file is not supported yet

react-image-gallery - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes