@nicecaroujs/cdn
Version:
A simple and customizable carousel library for React. This component allows you to display items dynamically with flexible configuration options.
1,219 lines (1,205 loc) • 106 kB
JavaScript
'use strict';
var AddAcsOnParentArrows = function AddAcsOnParentArrows(parentArrows) {
parentArrows === null || parentArrows === void 0 || parentArrows.setAttribute("role", "tablist");
};
var addAcsContainerTrack = function addAcsContainerTrack(containerTrack) {
containerTrack === null || containerTrack === void 0 || containerTrack.setAttribute("aria-live", "polite");
};
var AddAcsOnDots = function AddAcsOnDots(DotsArray) {
var setAttributesForDots = function setAttributesForDots(dots) {
dots.forEach(function (d, i) {
d.setAttribute("role", "tab");
var isActive = d.classList.contains("isActive");
d.setAttribute("aria-selected", isActive ? "true" : "false");
d.setAttribute("tabindex", isActive ? "0" : "-1");
});
};
var initAcsDots = function initAcsDots() {
var dots = Array.from(DotsArray);
setAttributesForDots(dots);
};
var updateAcsDots = function updateAcsDots() {
var dots = Array.from(DotsArray);
setAttributesForDots(dots);
};
return {
initAcsDots: initAcsDots,
updateAcsDots: updateAcsDots
};
};
var AddAcsOnParentDots = function AddAcsOnParentDots(parentDots) {
if (!parentDots) return;
parentDots.setAttribute("aria-label", "dots");
parentDots.setAttribute("role", "tablist");
};
var AddAcsOnContainer = function AddAcsOnContainer(container) {
if (!container) return;
container === null || container === void 0 || container.setAttribute("role", "region");
};
var AddAcsOnSlide = function AddAcsOnSlide(slidesArray) {
slidesArray.forEach(function (item, index) {
item.setAttribute("role", "tabpanel");
item.setAttribute("aria-roledescription", "slide");
item.setAttribute("aria-label", "".concat(index + 1, " sur ").concat(slidesArray.length));
});
};
var AddAcsOnImgCarousel = function AddAcsOnImgCarousel(container) {
var imgs = container === null || container === void 0 ? void 0 : container.querySelectorAll("img");
imgs === null || imgs === void 0 || imgs.forEach(function (item, index) {
if (!item.getAttribute("alt")) {
item.setAttribute("alt", "image number ".concat(index, " in carousel"));
}
});
};
var setGlobalAccessibility = function setGlobalAccessibility(carouselState) {
if (!carouselState) return;
var init = function init() {
var _carouselState$domEle = carouselState.domElements,
childrens = _carouselState$domEle.childrens,
trackContainer = _carouselState$domEle.trackContainer,
paginationBtnArray = _carouselState$domEle.paginationBtnArray,
container = _carouselState$domEle.container,
paginationContainer = _carouselState$domEle.paginationContainer,
arrowsContainer = _carouselState$domEle.arrowsContainer;
if (!childrens || !trackContainer || !paginationBtnArray || !container || !paginationContainer || !arrowsContainer) return;
AddAcsOnSlide(childrens);
addAcsContainerTrack(trackContainer);
AddAcsOnDots(paginationBtnArray).initAcsDots();
AddAcsOnParentDots(paginationContainer);
AddAcsOnContainer(container);
AddAcsOnParentArrows(arrowsContainer);
AddAcsOnImgCarousel(container);
AddAcsOnParentDots(paginationContainer);
};
var self = {
init: init
};
return self;
};
var LEFT = "left";
var RIGHT = "right";
var BREAKPOINTSSTATE = {
phone: 640,
tablet: 768,
laptop: 1024,
desktop: 1200
};
var TYPEDOTSANIM = {
classic: "classic",
progress: "progress"
};
var positionArrowsStyles = {
inside: {
left: "1rem",
right: "1rem"
},
outside: {
left: "-2.5rem",
right: "-2.5rem"
},
center: {
left: "-1rem",
right: "-1rem"
}
};
var positionYStylesDots = {
outside: "1rem",
inside: "-1.6rem"
};
var typeArrowsBtnLeft = {
arrow: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" height=\"20\" width=\"20\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18\" />\n</svg>\n\n",
chevron: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"black\" height=\"20\" width=\"20\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n</svg>\n"
};
var typeArrowsBtnRight = {
arrow: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" height=\"20\" width=\"20\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\" />\n</svg>\n",
chevron: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"black\" height=\"20\" width=\"20\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n</svg>\n\n"
};
var defaultTheme = {
light: {
primary: "#FFFFFF",
secondary: "#3C3C43",
third: "#3C3C43"
},
dark: {
primary: "#1C1C1E",
secondary: "#EBEBF5",
third: "#1C1C1E"
},
lightAppl: {
primary: "#FFFFFF",
secondary: "#007AFF",
third: "#007AFF"
}
};
var defaultOptions = {
drag: true,
bgGradientAnimated: false,
autoplay: {
delay: 3000,
enabled: false,
type: "timer",
fillProgressbar: false,
pauseOnHover: false,
isPlaying: false
},
pagination: {
defaultDotsStyle: true,
enabled: false,
type: "classic",
position: "outside",
wrap: false,
currentIndex: 0,
numberDots: 0,
specialWrap: {
enabled: false,
left: "0rem",
top: "0rem",
justifyContent: "flex-end",
alignItems: "flex-end",
orientation: "horizontal"
},
gap: "0.5rem",
sizeButton: "0.3rem"
},
arrows: {
specialDisplay: {
enabled: false,
justifyContent: "space-between",
alignItems: "center",
gap: "0.4rem",
prevButton: {
left: "0rem",
top: "0rem"
},
nextButton: {
left: "0rem",
top: "0rem"
}
},
enabled: true,
position: "inside",
shake: false,
type: "arrow",
sizeButton: "1.8rem",
arrowRadius: "50rem",
hideArrowIsInactive: false
},
customTheme: {
primary: "",
secondary: " ",
third: ""
},
enabledLoader: false,
slideRadius: "0rem",
ease: "",
paddingY: "0rem",
containerRadius: " 0rem",
itemsPerPage: 1,
itemsPerSlide: 1,
height: "100%",
width: "100%",
applytransparentMaskOnBorder: false,
breakpoints: {
phone: {},
tablet: {},
laptop: {},
desktop: {}
},
gap: "0.4rem"
};
var shakeElement = function shakeElement(element) {
if (!element) return;
setTimeout(function () {
element.classList.add("shake-button");
}, 1000);
setTimeout(function () {
element.classList.remove("shake-button");
}, 1500);
};
var shakeElementIfNeeded = function shakeElementIfNeeded(element, state) {
var _state$pagination$num, _state$pagination, _state$pagination$cur, _state$pagination2;
var numberDots = (_state$pagination$num = (_state$pagination = state.pagination) === null || _state$pagination === void 0 ? void 0 : _state$pagination.numberDots) !== null && _state$pagination$num !== void 0 ? _state$pagination$num : 0;
var currentIndex = (_state$pagination$cur = (_state$pagination2 = state.pagination) === null || _state$pagination2 === void 0 ? void 0 : _state$pagination2.currentIndex) !== null && _state$pagination$cur !== void 0 ? _state$pagination$cur : 0;
if (currentIndex !== 0 && currentIndex + 1 !== numberDots) {
var _state$arrows;
if (!((_state$arrows = state.arrows) !== null && _state$arrows !== void 0 && _state$arrows.shake)) return;
shakeElement(element);
}
};
var setPositionArrows = function setPositionArrows(leftButton, rightButton, position, specialDisplay) {
// if(!leftButton || !rightButton || !specialDisplay || !positionArrowsStyles) return ;
var validPosition = positionArrowsStyles[position];
if (validPosition && !specialDisplay) {
var _validPosition$left, _validPosition$right;
leftButton.style.left = (_validPosition$left = validPosition.left) !== null && _validPosition$left !== void 0 ? _validPosition$left : "0rem";
rightButton.style.right = (_validPosition$right = validPosition.right) !== null && _validPosition$right !== void 0 ? _validPosition$right : "0rem";
} else {
var _positionArrowsStyles, _positionArrowsStyles2, _positionArrowsStyles3, _positionArrowsStyles4;
leftButton.style.left = (_positionArrowsStyles = (_positionArrowsStyles2 = positionArrowsStyles["center"]) === null || _positionArrowsStyles2 === void 0 ? void 0 : _positionArrowsStyles2.left) !== null && _positionArrowsStyles !== void 0 ? _positionArrowsStyles : "0";
rightButton.style.right = (_positionArrowsStyles3 = (_positionArrowsStyles4 = positionArrowsStyles["center"]) === null || _positionArrowsStyles4 === void 0 ? void 0 : _positionArrowsStyles4.right) !== null && _positionArrowsStyles3 !== void 0 ? _positionArrowsStyles3 : "0";
}
};
var setGroupsDisplayArrows = function setGroupsDisplayArrows(_ref) {
var elements = _ref.elements,
specialDisplay = _ref.specialDisplay,
prevButton = _ref.prevButton,
nextButton = _ref.nextButton,
justifyContent = _ref.justifyContent,
alignItems = _ref.alignItems,
gap = _ref.gap;
if (specialDisplay && elements) {
var _prevButton$left, _nextButton$left;
// if(leftButton){
elements[1].style.left = "".concat((_prevButton$left = prevButton === null || prevButton === void 0 ? void 0 : prevButton.left) !== null && _prevButton$left !== void 0 ? _prevButton$left : "0%");
elements[2].style.left = "".concat((_nextButton$left = nextButton === null || nextButton === void 0 ? void 0 : nextButton.left) !== null && _nextButton$left !== void 0 ? _nextButton$left : "0%");
// }
elements[1].style.top = "".concat(prevButton === null || prevButton === void 0 ? void 0 : prevButton.top);
elements[2].style.top = "".concat(nextButton === null || nextButton === void 0 ? void 0 : nextButton.top);
elements[0].style.justifyContent = "".concat(justifyContent);
elements[0].style.alignItems = "".concat(alignItems);
elements[0].style.gap = "".concat(gap);
}
};
var setSizeArrows = function setSizeArrows(element, sizeValue) {
if (!element || !sizeValue) return;
element.style.height = sizeValue;
element.style.width = sizeValue;
};
var setLoaderSize = function setLoaderSize(element, sizeValue) {
if (!element || !sizeValue) return;
element.style.height = sizeValue;
element.style.width = sizeValue;
};
var setBorderRadiusArrows = function setBorderRadiusArrows(container, radius) {
if (!container || !radius) return;
container.style.borderRadius = "".concat(radius);
};
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _createForOfIteratorHelper(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
t && (r = t);
var n = 0,
F = function () {};
return {
s: F,
n: function () {
return n >= r.length ? {
done: !0
} : {
done: !1,
value: r[n++]
};
},
e: function (r) {
throw r;
},
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var o,
a = !0,
u = !1;
return {
s: function () {
t = t.call(r);
},
n: function () {
var r = t.next();
return a = r.done, r;
},
e: function (r) {
u = !0, o = r;
},
f: function () {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
}
};
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var _document;
var isType = function isType(value, type) {
return _typeof(value) === type;
};
var validateString = function validateString(value) {
return isType(value, "string");
};
var validateNumber = function validateNumber(value) {
return isType(value, "number");
};
var validateArray = function validateArray(value) {
return Array.isArray(value);
};
var getElement = function getElement(selector) {
return document.querySelector(selector);
};
var getElements = function getElements(selector) {
return document.querySelectorAll(selector);
};
// set Gap on track container
var interval;
var handleReplayExp = function handleReplayExp(state) {
if (state.autoplay && state.autoplay.enabled) {
state.autoplay.isPlaying = false;
clearTimeout(interval);
interval = setTimeout(function () {}, !!state.autoplay.delay ? state.autoplay.delay + 2000 : 3000);
} else {
clearTimeout(interval);
}
};
var setGapTrack = function setGapTrack(tabElements, property, value) {
if (!validateString(property) || !validateString(value)) return;
tabElements.forEach(function (item, index, array) {
if (index !== array.length - 1) {
item.style[property] = "".concat(value);
}
});
};
var clearPagination = function clearPagination(paginationElement) {
if (!paginationElement) return;
paginationElement.innerHTML = "";
};
var convertToPixelsOriginal = function convertToPixelsOriginal(value) {
var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
if (value.endsWith('rem')) {
return parseFloat(value) * rootFontSize;
} else if (value.endsWith('px')) {
return parseFloat(value);
} else {
var numericValue = parseFloat(value);
if (isNaN(numericValue)) {
return 0;
}
return numericValue;
}
};
// export const computeItemWidth = ({
// container,
// itemsPerPage,
// gap,
// width,
// wrapper
// }: {
// container: HTMLElement,
// itemsPerPage: number,
// gap: string,
// width: string,
// wrapper:HTMLElement
// }): number => {
// if (!container) console.log("Container is required.");
// const widthc = container.offsetWidth
// let finalWidth: number = widthc ;
// if (itemsPerPage <= 0) return 0;
// const totalGaps = convertToPixelsOriginal(gap) * (itemsPerPage - 1);
// if (finalWidth < totalGaps) return 0;
// return (finalWidth - totalGaps) / itemsPerPage;
// }
var computeItemWidth = function computeItemWidth(_ref) {
var container = _ref.container,
itemsPerPage = _ref.itemsPerPage,
gap = _ref.gap;
if (!container) return "0%";
var widthc = container.offsetWidth; // Largeur du conteneur
var finalWidth = widthc;
if (itemsPerPage <= 0) return '0%';
var totalGaps = convertToPixelsOriginal(gap) * (itemsPerPage - 1);
if (finalWidth < totalGaps) return '0%';
// Calculer la largeur d'un élément en utilisant calc()
var itemWidth = (finalWidth - totalGaps) / itemsPerPage;
// Retourner la largeur sous forme de chaîne avec calc()
return "calc(".concat(itemWidth / finalWidth * 100, "%)");
};
var setStylesToChilds = function setStylesToChilds(_ref2) {
var childrens = _ref2.childrens,
itemWidth = _ref2.itemWidth;
if (!validateArray(Array.from(childrens)) || childrens.length === 0) return;
var minWidthValue = "".concat(itemWidth);
var _iterator = _createForOfIteratorHelper(childrens),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
item.style.width = minWidthValue;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
};
var fadeInContainer = function fadeInContainer(container) {
if (!container) return;
container.style.opacity = "1";
};
// export const getScrollDistance = (
// currentIndex: number ,
// itemsPerSlide: number ,
// itemWidth: string ,
// containerWidth:number,
// gap: string
// ): number => {
// const itemWidthInPixels = (parseFloat(itemWidth) / 100) * containerWidth;
// const gapInPixels = convertToPixelsOriginal(gap);
// console.log(itemWidthInPixels,parseFloat(itemWidth),itemWidth ,containerWidth,-(currentIndex * (itemWidthInPixels + gapInPixels) * itemsPerSlide),"lldfdfdf")
// return -(currentIndex * (itemWidthInPixels + gapInPixels) * itemsPerSlide);
// }
function extractAndConvertPercentageToPixels(calcString, containerWidth) {
// Extraire le pourcentage de la chaîne calc
var percentageMatch = calcString.match(/(\d+(\.\d+)?)%/);
if (!percentageMatch) {
return 0;
}
var initialPercentage = parseFloat(percentageMatch[1]);
// Convertir le pourcentage initial en pixels
var initialPixels = initialPercentage / 100 * containerWidth;
// Retourner les pixels
return initialPixels;
}
var getScrollDistance = function getScrollDistance(currentIndex, itemsPerSlide, itemWidth,
// Exprimé sous forme de calc()
containerWidth, gap) {
// Extraire le pourcentage de itemWidth
var itemWidthInPixels = extractAndConvertPercentageToPixels(itemWidth, containerWidth);
// Convertir gap en pixels
var gapInPixels = convertToPixelsOriginal(gap);
// console.log(itemWidthInPixels, itemWidth, containerWidth, -(currentIndex * (itemWidthInPixels + gapInPixels) * itemsPerSlide), "lldfdfdf");
return -(currentIndex * (itemWidthInPixels + gapInPixels) * itemsPerSlide);
};
var scrollCarousel = function scrollCarousel(containerTrack, distanceScroll) {
if (!(containerTrack instanceof HTMLElement) || !validateNumber(distanceScroll)) return;
containerTrack.style.transform = "translate3d(".concat(distanceScroll, "px,0,0)");
};
var isNextSlideAvailable = function isNextSlideAvailable(currentIndex, numbreElementPagination) {
return (currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0) < numbreElementPagination - 1;
};
var isPrevSlideAvailable = function isPrevSlideAvailable(currentIndex) {
return currentIndex > 0;
};
var updateCurrentIndex = function updateCurrentIndex(currentIndex, delta) {
return (currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0) + (delta !== null && delta !== void 0 ? delta : 0);
};
var resetCurrentIndex = function resetCurrentIndex(state) {
if (!state.pagination || !state.pagination.currentIndex) return;
state.pagination.currentIndex = 0;
};
var resetScrollX = function resetScrollX(element) {
if (element) {
element.style.transform = "translate3d(0,0,0)";
}
};
var managePaginationButtonStates = function managePaginationButtonStates(id, paginationBtnArray) {
if (!paginationBtnArray) return;
paginationBtnArray === null || paginationBtnArray === void 0 || paginationBtnArray.forEach(function (button, index) {
button.classList.toggle("isActive", index === id);
button.classList.toggle("inActive", index !== id);
});
};
var addScrollAction = function addScrollAction(button, orientation, scrollAction) {
if (!(button instanceof HTMLElement) || typeof orientation !== "string" || typeof scrollAction !== "function") return;
var handleClick = function handleClick() {
if (orientation) {
scrollAction(orientation);
}
};
button.addEventListener("click", handleClick);
return function () {
button.removeEventListener("click", handleClick);
};
};
var addButtonsToUI = function addButtonsToUI(leftButton, rightButton, arrowsContainer) {
if (!(arrowsContainer instanceof HTMLElement) || !leftButton || !rightButton) return;
var buttonExists = function buttonExists(className) {
return arrowsContainer.querySelector(".".concat(className)) !== null;
};
if (!buttonExists('prev')) {
arrowsContainer.appendChild(leftButton);
}
if (!buttonExists('next')) {
arrowsContainer.appendChild(rightButton);
}
};
var configureButton = function configureButton(button, ariaLabel, className) {
button.setAttribute("type", "button");
button.setAttribute("aria-label", ariaLabel);
button.setAttribute("role", "tab");
button.classList.add(className);
};
var createButtonDirection = function createButtonDirection(text) {
if (!validateString(text)) return;
var button = document.createElement("button");
button.innerHTML = text;
return button;
};
var createPaginationButton = function createPaginationButton(idp, onClick, type) {
var id = idp !== null && idp !== void 0 ? idp : 0;
if (!validateNumber(id) || typeof onClick !== "function") return;
var button = createButton("paginationBtn", {
"id-slide": id + 1
});
button.addEventListener("click", function () {
onClick(id);
});
if (type === "progress") {
var progressBar = document.createElement("span");
progressBar.classList.add("progressbar");
button.appendChild(progressBar);
}
if (type === "group") {
var _progressBar = document.createElement("span");
_progressBar.classList.add("progressbar");
button.appendChild(_progressBar);
}
button.classList.add(type);
button.setAttribute("type", "button");
button.setAttribute("aria-label", "this dot show slide ".concat(id + 1));
return button;
};
var createDots = function createDots(count, onClick, type) {
var buttons = [];
if (!count) return;
for (var i = 0; i < count; i++) {
var button = createPaginationButton(i, onClick, type);
if (!button) return;
buttons.push(button);
}
return buttons;
};
var createTimerButton = function createTimerButton(id, onClick, widthbuttons) {
if (!id) return;
var button = createButton("timerBtn", {
"id-slide": id + 1
});
button.style.width = widthbuttons + "px";
var line = document.createElement("div");
line.classList.add("line");
button.appendChild(line);
button.addEventListener("click", function () {
return onClick(id);
});
return button;
};
var createTimerSlide = function createTimerSlide(count, onClick, widthbuttons) {
var buttons = [];
if (!buttons) return;
for (var i = 0; i < count; i++) {
var button = createTimerButton(i, onClick, widthbuttons);
if (!button) return;
buttons.push(button);
}
return buttons;
};
var appendButtonsToPagination = function appendButtonsToPagination(paginationElement, buttons, isWrapper) {
if (isWrapper) {
var wrapperDots = document.createElement("div");
wrapperDots.classList.add("wrapper-dots");
buttons.forEach(function (button) {
wrapperDots.appendChild(button);
});
if (!paginationElement) return;
paginationElement.appendChild(wrapperDots);
} else {
if (!paginationElement) return;
buttons.forEach(function (button) {
paginationElement.appendChild(button);
});
}
};
var createButton = function createButton(className) {
var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var button = document.createElement("button");
button.classList.add(className);
Object.entries(attributes).forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
key = _ref4[0],
value = _ref4[1];
button.setAttribute(key, value);
});
return button;
};
var setActiveButton = function setActiveButton(buttons, activeIndex) {
if (buttons) {
buttons.forEach(function (button, index) {
button.classList.toggle("isActive", index === activeIndex);
});
}
};
var handleStopAutoplay = function handleStopAutoplay(state) {
if (state.autoplay) {
state.autoplay.isPlaying = false;
}
};
var globalRoot = (_document = document) === null || _document === void 0 ? void 0 : _document.documentElement;
var createRightStylesBtnDots = function createRightStylesBtnDots(numberDots, navigatePagination, type) {
var dotType = type === TYPEDOTSANIM.progress ? type : TYPEDOTSANIM.classic;
return createDots(numberDots, navigatePagination, dotType);
};
var activeButtonArrows = function activeButtonArrows(state) {
if (!state) return;
var domElements = state.domElements;
var arrowsContainer = domElements.arrowsContainer;
if (!arrowsContainer || !state.arrows) return;
var prevButton = arrowsContainer.querySelector(".prev");
var nextButton = arrowsContainer.querySelector(".next");
if (prevButton && nextButton && state.arrows.enabled) {
if (state.arrows.hideArrowIsInactive) {
var _state$pagination$num;
prevButton.style.visibility = "visible";
nextButton.style.visibility = "visible";
if (!state.pagination) return;
if (state.pagination.currentIndex === 0) {
prevButton.style.visibility = "hidden";
}
if (state.pagination.currentIndex === ((_state$pagination$num = state.pagination.numberDots) !== null && _state$pagination$num !== void 0 ? _state$pagination$num : 0) - 1) {
nextButton.style.visibility = "hidden";
}
} else {
var _state$pagination$num2;
prevButton.style.opacity = "1";
nextButton.style.opacity = "1";
if (!state.pagination) return;
if (state.pagination.currentIndex === 0) {
prevButton.style.opacity = "0.5";
prevButton.setAttribute("disabled", "true");
} else {
prevButton.removeAttribute("disabled");
}
if (state.pagination.currentIndex === ((_state$pagination$num2 = state.pagination.numberDots) !== null && _state$pagination$num2 !== void 0 ? _state$pagination$num2 : 0) - 1) {
nextButton.style.opacity = "0.5";
nextButton.setAttribute("disabled", "true");
} else {
nextButton.removeAttribute("disabled");
}
}
}
};
var debounce = function debounce(func, wait) {
var timeout;
return function () {
var _this = this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timeout);
timeout = setTimeout(function () {
return func.apply(_this, args);
}, wait);
};
};
// export const debounce = (func:()=>void, wait:number) => {
// let timeout :number | any;
// return function (...args:any) {
// const context : any = this
// clearTimeout(timeout)
// timeout = setTimeout(() => func.apply(context, args), wait)
// }
// }
var addArrow = function addArrow(state, scroll, dots) {
var domElements = state.domElements,
arrows = state.arrows;
var arrowsContainer = domElements.arrowsContainer;
// Early return if arrows are not enabled
if (!arrows) return;
var arrowRadius = arrows.arrowRadius,
sizeButton = arrows.sizeButton,
position = arrows.position,
specialDisplay = arrows.specialDisplay,
type = arrows.type;
// Function to handle scrolling actions based on orientation
var scrollCarouselAction = function scrollCarouselAction(orientation) {
var _state$domElements, _state$pagination$cur, _state$pagination, _state$domElements2;
if (orientation === LEFT) {
scroll === null || scroll === void 0 || scroll.prevSlide();
} else if (orientation === RIGHT) {
scroll === null || scroll === void 0 || scroll.nextSlide();
}
// Update button states and pagination if current index exists
activeButtonArrows(state);
handleReplayExp(state);
if (!((_state$domElements = state.domElements) !== null && _state$domElements !== void 0 && _state$domElements.paginationBtnArray)) return;
dots === null || dots === void 0 || dots.managerStateDots((_state$pagination$cur = (_state$pagination = state.pagination) === null || _state$pagination === void 0 ? void 0 : _state$pagination.currentIndex) !== null && _state$pagination$cur !== void 0 ? _state$pagination$cur : 0, (_state$domElements2 = state.domElements) === null || _state$domElements2 === void 0 ? void 0 : _state$domElements2.paginationBtnArray);
};
// Function to create an arrow button
var createArrowButton = function createArrowButton(direction) {
if (!type || !typeArrowsBtnLeft || !typeArrowsBtnRight) return;
var typeArrow = direction === LEFT ? typeArrowsBtnLeft[type] || typeArrowsBtnLeft["arrow"] : typeArrowsBtnRight[type] || typeArrowsBtnRight["arrow"];
var button = createButtonDirection(typeArrow);
if (!button) return;
configureButton(button, "Move to ".concat(direction === LEFT ? 'previous' : 'next', " slide"), direction === LEFT ? "prev" : "next");
addScrollAction(button, direction, scrollCarouselAction);
return button;
};
// Function to initialize arrow buttons
var initButtons = function initButtons() {
var leftButton = createArrowButton(LEFT);
var rightButton = createArrowButton(RIGHT);
// Early return if any button or required properties are missing
if (!leftButton || !rightButton) return;
// Add buttons to the UI and configure their properties
addButtonsToUI(leftButton, rightButton, arrowsContainer);
activeButtonArrows(state);
setPositionArrows(leftButton, rightButton, position, specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.enabled);
setSizeArrows(leftButton, sizeButton);
setSizeArrows(rightButton, sizeButton);
setGroupsDisplayArrows({
elements: [arrowsContainer, leftButton, rightButton],
specialDisplay: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.enabled,
prevButton: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.prevButton,
nextButton: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.nextButton,
justifyContent: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.justifyContent,
alignItems: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.alignItems,
gap: specialDisplay === null || specialDisplay === void 0 ? void 0 : specialDisplay.gap
});
setBorderRadiusArrows(leftButton, arrowRadius);
setBorderRadiusArrows(rightButton, arrowRadius);
};
// Function to initialize the arrow module
var init = function init() {
var _state$arrows, _state$arrows2;
if (!arrowsContainer) return;
if ((_state$arrows = state.arrows) !== null && _state$arrows !== void 0 && _state$arrows.enabled) {
arrowsContainer.innerHTML = "";
initButtons();
}
if (!((_state$arrows2 = state.arrows) !== null && _state$arrows2 !== void 0 && _state$arrows2.enabled) && arrowsContainer) {
arrowsContainer.innerHTML = "";
}
};
// Return the public interface for the arrow module
return {
init: init
};
};
var observer = null;
var inView = function inView(state, callback) {
observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
var _state$autoplay;
if (state.autoplay && !((_state$autoplay = state.autoplay) !== null && _state$autoplay !== void 0 && _state$autoplay.isPlaying)) {
state.autoplay.isPlaying = true;
}
} else {
handleStopAutoplay(state);
callback();
}
});
}, {
threshold: 0.2
});
var check = function check(element) {
if (element && observer) {
observer.observe(element);
}
};
var stopObserving = function stopObserving(element) {
if (element && observer) {
observer.unobserve(element);
}
};
var cleanupObservers = function cleanupObservers() {
if (observer) {
observer.disconnect();
observer = null;
}
};
var handleVisibilityChange = function handleVisibilityChange() {
if (document.hidden) {
handleStopAutoplay(state);
} else {
if (!state.autoplay) return;
state.autoplay.isPlaying = true;
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
var self = {
check: check,
stopObserving: stopObserving,
cleanupObservers: cleanupObservers
};
return self;
};
var createAutoplay = function createAutoplay(state, scroll) {
var _state$autoplay;
if (!((_state$autoplay = state.autoplay) !== null && _state$autoplay !== void 0 && _state$autoplay.enabled)) return;
var autoplay = state.autoplay;
var _state$domElements = state.domElements,
childrens = _state$domElements.childrens,
container = _state$domElements.container,
trackContainer = _state$domElements.trackContainer;
var childrensLength = childrens === null || childrens === void 0 ? void 0 : childrens.length;
var _ref = scroll || {},
navigatePagination = _ref.navigatePagination;
var autoplayInterval = null;
var isPlaying = false;
var clearAutoplayInterval = function clearAutoplayInterval() {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
}
};
var view = inView(state, clearAutoplayInterval);
var canStartAutoplay = function canStartAutoplay() {
var _state$autoplay2;
return (_state$autoplay2 = state.autoplay) === null || _state$autoplay2 === void 0 ? void 0 : _state$autoplay2.enabled;
};
var calculateNextIndex = function calculateNextIndex() {
var _state$pagination$cur, _state$pagination;
return (((_state$pagination$cur = (_state$pagination = state.pagination) === null || _state$pagination === void 0 ? void 0 : _state$pagination.currentIndex) !== null && _state$pagination$cur !== void 0 ? _state$pagination$cur : 0) + 1) % (childrensLength !== null && childrensLength !== void 0 ? childrensLength : 0);
};
var handleAutoplay = function handleAutoplay() {
var _state$autoplay3;
if (!container || !navigatePagination) return;
view.check(container);
if ((_state$autoplay3 = state.autoplay) !== null && _state$autoplay3 !== void 0 && _state$autoplay3.isPlaying) {
var _state$pagination$cur2, _state$pagination2, _state$pagination$num, _state$pagination3;
var nextIndex = calculateNextIndex();
if (((_state$pagination$cur2 = (_state$pagination2 = state.pagination) === null || _state$pagination2 === void 0 ? void 0 : _state$pagination2.currentIndex) !== null && _state$pagination$cur2 !== void 0 ? _state$pagination$cur2 : 0) < ((_state$pagination$num = (_state$pagination3 = state.pagination) === null || _state$pagination3 === void 0 ? void 0 : _state$pagination3.numberDots) !== null && _state$pagination$num !== void 0 ? _state$pagination$num : 0) - 1) {
navigatePagination(nextIndex);
} else {
resetCurrentIndex(state);
resetScrollX(trackContainer);
navigatePagination(0);
}
}
};
var startAutoplay = function startAutoplay() {
if (isPlaying || !canStartAutoplay()) return;
isPlaying = true;
clearAutoplayInterval();
if (autoplay.type !== "progressbar") {
autoplayInterval = setInterval(handleAutoplay, autoplay.delay);
}
};
var stopAutoplay = function stopAutoplay() {
isPlaying = false;
clearAutoplayInterval();
};
var getIsPlaying = function getIsPlaying() {
return isPlaying;
};
return {
startAutoplay: startAutoplay,
stopAutoplay: stopAutoplay,
getIsPlaying: getIsPlaying
};
};
var initOrganizeSpace = function initOrganizeSpace(state) {
var itemWidth = state.layout.itemWidth;
var childrens = state.domElements.childrens;
var init = function init() {
if (!itemWidth || !childrens) return;
requestAnimationFrame(function () {
setStylesToChilds({
childrens: childrens,
itemWidth: itemWidth
});
});
};
var self = {
init: init
};
return self;
};
var setPositionDots = function setPositionDots(positionType, withwrapper) {
var position = positionYStylesDots[positionType];
if (position && !withwrapper) {
globalRoot.style.setProperty("--nc-dots-y", position);
} else {
globalRoot.style.setProperty("--nc-dots-y", positionYStylesDots["inside"]);
}
};
var setSpecialWrapDots = function setSpecialWrapDots(_ref) {
var isWithWrap = _ref.isWithWrap,
elements = _ref.elements,
specialWrap = _ref.specialWrap,
left = _ref.left,
top = _ref.top,
justifyContent = _ref.justifyContent,
alignItems = _ref.alignItems,
orientation = _ref.orientation;
if (specialWrap && isWithWrap && elements) {
var paginationContainer = elements[0];
var wrapperDots = paginationContainer === null || paginationContainer === void 0 ? void 0 : paginationContainer.querySelector(".wrapper-dots");
paginationContainer.style.padding = "0rem ".concat(2, "rem");
globalRoot.style.setProperty("--nc-third-color", "white");
paginationContainer.style.justifyContent = "".concat(justifyContent);
paginationContainer.style.alignItems = "".concat(alignItems);
if (!wrapperDots) return;
wrapperDots.style.transform = "rotate(".concat(orientation === "vertical" ? "90deg" : "0deg", ")");
wrapperDots.style.top = "".concat(top);
wrapperDots.style.left = "".concat(left);
}
};
var setSizeDots = function setSizeDots(sizeValue) {
globalRoot.style.setProperty("--nc-dots-size", "".concat(sizeValue));
};
var setGapToDots = function setGapToDots(gapValue) {
globalRoot.style.setProperty("--nc-dots-gap", "".concat(gapValue));
};
var applyEffects = function applyEffects(element, effects, state) {
effects.forEach(function (effect) {
if (effect && typeof effect === 'function') {
effect(element, state);
}
});
};
var handleAutoplay = function handleAutoplay(state) {
if (!state || !state.autoplay) return;
state.autoplay.isPlaying = false;
setTimeout(function () {
state.isPlaying = false;
}, 4000);
};
var canClickLeft = function canClickLeft(currentIndex, state) {
return isPrevSlideAvailable(currentIndex);
};
var canClickRight = function canClickRight(currentIndex, state) {
var _state$pagination$num, _state$pagination;
return isNextSlideAvailable(currentIndex, (_state$pagination$num = (_state$pagination = state.pagination) === null || _state$pagination === void 0 ? void 0 : _state$pagination.numberDots) !== null && _state$pagination$num !== void 0 ? _state$pagination$num : 0);
};
var canUpdateSlide = function canUpdateSlide(currentIndex, direction, state) {
var _state$pagination2, _state$pagination3;
if (!((_state$pagination2 = state.pagination) !== null && _state$pagination2 !== void 0 && _state$pagination2.numberDots)) return;
var isNext = direction === 1;
return isNext && isNextSlideAvailable(currentIndex, (_state$pagination3 = state.pagination) === null || _state$pagination3 === void 0 ? void 0 : _state$pagination3.numberDots) || !isNext && isPrevSlideAvailable(currentIndex);
};
var updateSlide = function updateSlide(direction, state) {
var _state$pagination4;
var currentIndex = (_state$pagination4 = state.pagination) === null || _state$pagination4 === void 0 ? void 0 : _state$pagination4.currentIndex;
var newIndex = updateCurrentIndex(currentIndex, direction);
if (!state.domElements.trackContainer || !state.pagination) return;
if (canUpdateSlide(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, direction, state)) {
var _state$layout$itemsPe, _state$layout$itemWid, _state$domElements, _state$layout$gap;
state.isPlaying = true;
state.pagination.currentIndex = newIndex !== null && newIndex !== void 0 ? newIndex : 0;
scrollCarousel(state.domElements.trackContainer, getScrollDistance(newIndex !== null && newIndex !== void 0 ? newIndex : 0, (_state$layout$itemsPe = state.layout.itemsPerSlide) !== null && _state$layout$itemsPe !== void 0 ? _state$layout$itemsPe : 0, (_state$layout$itemWid = state.layout.itemWidth) !== null && _state$layout$itemWid !== void 0 ? _state$layout$itemWid : "0%", parseInt(getComputedStyle((_state$domElements = state.domElements) === null || _state$domElements === void 0 ? void 0 : _state$domElements.container).width, 10), (_state$layout$gap = state.layout.gap) !== null && _state$layout$gap !== void 0 ? _state$layout$gap : "0rem"));
handleAutoplay(state);
}
};
var navigateToSlide = function navigateToSlide(id, state) {
var _state$layout$itemsPe2, _state$layout$itemWid2, _state$domElements2, _state$layout$gap2, _state$layout$itemsPe3, _state$layout$itemWid3, _state$domElements3, _state$layout$gap3;
if (!state.pagination) return;
state.pagination.currentIndex = id;
activeButtonArrows(state);
if (!state.domElements.trackContainer) return;
scrollCarousel(state.domElements.trackContainer, getScrollDistance(id, (_state$layout$itemsPe2 = state.layout.itemsPerSlide) !== null && _state$layout$itemsPe2 !== void 0 ? _state$layout$itemsPe2 : 0, (_state$layout$itemWid2 = state.layout.itemWidth) !== null && _state$layout$itemWid2 !== void 0 ? _state$layout$itemWid2 : "0%", parseInt(getComputedStyle((_state$domElements2 = state.domElements) === null || _state$domElements2 === void 0 ? void 0 : _state$domElements2.container).width, 10), (_state$layout$gap2 = state.layout.gap) !== null && _state$layout$gap2 !== void 0 ? _state$layout$gap2 : "0rem"));
console.log(id, (_state$layout$itemsPe3 = state.layout.itemsPerSlide) !== null && _state$layout$itemsPe3 !== void 0 ? _state$layout$itemsPe3 : 0, (_state$layout$itemWid3 = state.layout.itemWidth) !== null && _state$layout$itemWid3 !== void 0 ? _state$layout$itemWid3 : "0%", parseInt(getComputedStyle((_state$domElements3 = state.domElements) === null || _state$domElements3 === void 0 ? void 0 : _state$domElements3.container).width, 10), (_state$layout$gap3 = state.layout.gap) !== null && _state$layout$gap3 !== void 0 ? _state$layout$gap3 : "0rem", "lllll");
managePaginationButtonStates(id, state.domElements.paginationBtnArray);
};
var scroll = function scroll(state) {
for (var _len = arguments.length, effects = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
effects[_key - 1] = arguments[_key];
}
// const { arrowsContainer } = state.domElements;
// Early return if arrowsContainer is not defined
// if (!arrowsContainer) return;
// Function to update the slide if possible based on direction
var updateSlideIfPossible = function updateSlideIfPossible(direction) {
var _state$pagination5, _state$domElements$ar, _state$domElements$ar2;
var currentIndex = (_state$pagination5 = state.pagination) === null || _state$pagination5 === void 0 ? void 0 : _state$pagination5.currentIndex;
// Early return if currentIndex is not defined
var nextArrow = (_state$domElements$ar = state.domElements.arrowsContainer) === null || _state$domElements$ar === void 0 ? void 0 : _state$domElements$ar.querySelector(".next");
var prevArrow = (_state$domElements$ar2 = state.domElements.arrowsContainer) === null || _state$domElements$ar2 === void 0 ? void 0 : _state$domElements$ar2.querySelector(".prev");
var canClick = direction === 1 ? canClickRight(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, state) : canClickLeft(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0);
if (canClick) {
updateSlide(direction, state);
var arrow = direction === 1 ? nextArrow : prevArrow;
applyEffects(arrow, effects, state);
}
};
// Function to navigate to the next slide
var nextSlide = function nextSlide() {
updateSlideIfPossible(1);
};
// Function to navigate to the previous slide
var prevSlide = function prevSlide() {
updateSlideIfPossible(-1);
};
// Function to navigate to a specific slide by ID
var navigatePagination = function navigatePagination(id) {
navigateToSlide(id, state);
state.isPlaying = false; // Stop autoplay when navigating
};
// Return the public interface for the scroll module
var self = {
nextSlide: nextSlide,
navigatePagination: navigatePagination,
prevSlide: prevSlide,
canClickLeft: canClickLeft,
canClickRight: canClickRight
};
return self;
};
var createTimer = function createTimer(state, elements) {
var _state$pagination3, _state$pagination4;
var _ref = scroll(state) || {},
navigatePagination = _ref.navigatePagination;
var trackContainer = state.domElements.trackContainer;
var times = Array(elements.length).fill(0);
var shouldRun = false;
var intervalId = null;
var resetProgressBars = function resetProgressBars(indices) {
indices.forEach(function (index) {
times[index] = 0;
elements[index].style.width = '0%';
});
};
var animateProgressBar = function animateProgressBar() {
var _state$pagination;
var currentIndex = (_state$pagination = state.pagination) === null || _state$pagination === void 0 ? void 0 : _state$pagination.currentIndex;
if (!elements[currentIndex]) return;
if (times[currentIndex] < 100) {
times[currentIndex] += 1;
elements[currentIndex].style.width = "".concat(times[currentIndex], "%");
if (currentIndex > 0) {
var _state$autoplay;
times[currentIndex - 1] = (_state$autoplay = state.autoplay) !== null && _state$autoplay !== void 0 && _state$autoplay.fillProgressbar ? 100 : 0;
elements[currentIndex - 1].style.width = "".concat(times[currentIndex - 1], "%");
}
if (currentIndex < elements.length - 1) {
times[currentIndex + 1] = 0;
elements[currentIndex + 1].style.width = "".concat(times[currentIndex + 1], "%");
}
} else {
handleProgressCompletion();
}
};
var handleProgressCompletion = function handleProgressCompletion() {
var _state$pagination2;
var currentIndex = (_state$pagination2 = state.pagination) === null || _state$pagination2 === void 0 ? void 0 : _state$pagination2.currentIndex;
if (!elements[currentIndex] || !state.pagination) return;
elements[currentIndex].style.width = '0%';
times[currentIndex] = 0;
state.pagination.currentIndex = (currentIndex + 1) % elements.length;
if (state.pagination.currentIndex === 0) {
resetProgressBars(_toConsumableArray(Array(elements.length).keys()));
}
if (!navigatePagination) return;
navigatePagination(state.pagination.currentIndex);
if (state.pagination.currentIndex === 0) {
if (!trackContainer) return;
resetCurrentIndex(state);
resetScrollX(trackContainer);
resetProgressBars(_toConsumableArray(Array(elements.length).keys()));
}
};
var startAnimation = function startAnimation(index) {
if (!shouldRun) {
shouldRun = true;
if (!state.pagination || !state.autoplay || !state.autoplay.delay) return;
state.pagination.currentIndex = index;
if (!intervalId) {
intervalId = setInte