futura.js/dist/fv-carousel.min.js

A small JavaScript library for common tasks such as Carousel, Exception, Animation handler and more...

const DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel="data-fv-visible",DATA_POSITION$$module$lib$FvCarousel$FvCarousel="data-fv-position",SLIDE_ITEM_LABEL$$module$lib$FvCarousel$FvCarousel="aria-label",DIV_NODE$$module$lib$FvCarousel$FvCarousel="div",DOT_CLASS$$module$lib$FvCarousel$FvCarousel="fv-carousel-dots-item",DEFAULT_PARAM$$module$lib$FvCarousel$FvCarousel={items:2,margin:"5px",prev:".fv-carousel-control-prev",next:".fv-carousel-control-next",autoplay:!0,autoplaySpeed:"500ms",autoplayHoverPause:!0,
timeout:5E3,allowDrag:!0,keyDirection:!0,direction:"horizontal",dots:{el:".fv-dots",direction:"vertical"}},CAROUSEL_STYLE$$module$lib$FvCarousel$FvCarousel="\n    .fv-carousel {overflow: hidden;max-width:100%;height: 100%;}\n    .fv-carousel-inner {width: 100%;height: 100%;overflow: hidden;padding: 0;}\n    .fv-carousel-group {width: 100%;height: 100%;display: flex;flex-wrap: nowrap;}\n    .fv-carousel-item {flex: 0 0 auto;width: 100%;height: 100%;display: block; }\n    .direction-horizontal {flex-direction: row}\n    .direction-vertical {flex-direction: column}\n    .fv-carousel-dots {z-index: 6}\n    .fv-carousel-dots-group {display: flex;justify-content: space-between;height: 100%;width: 100%;}\n    .fv-carousel-dots-item {margin: .5rem!important;height:10px;width:10px;border-radius:50%;}\n    .fv-dot-active {background-color: red;}\n    .fv-dot-inactive {background-color: silver;}\n";
class FvCarousel$$module$lib$FvCarousel$FvCarousel{constructor(b,a=DEFAULT_PARAM$$module$lib$FvCarousel$FvCarousel){this._itemClass=".fv-carousel-item";this.___i=0;this.__=document.querySelector(b);this.___=this.__.querySelectorAll(this._itemClass);this.prevBtn=document.querySelector(a.prev);this.nextBtn=document.querySelector(a.next);this.dotsContainer=document.querySelector(a.dots.el);this.dotsDirection=a.dots.direction;this.slideDirection=a.direction;this.timeout=a.timeout??5E3;this.itemsCount=
a.items??2;this.autoplaySpeed=a.autoplaySpeed??"500ms";this.elementMargin=a.margin;this.allowKeyDirection=void 0===a.keyDirection?!0:a.keyDirection;this.autoplay=void 0===a.autoplay?!0:a.autoplay;this.autoplayHoverPause=void 0===a.autoplayHoverPause?!0:a.autoplayHoverPause;this.allowDrag=void 0===a.allowDrag?!0:a.allowDrag;this.elementWidth="vertical"===a.direction?this.__.offsetWidth:this.__.offsetWidth/this.itemsCount;this.elementHeight=this.___[0].getBoundingClientRect().height;this.start()}start(){var b=
document.createElement("style");b.innerHTML=CAROUSEL_STYLE$$module$lib$FvCarousel$FvCarousel;document.querySelector("head").append(b);this.__.classList.add("fv-carousel");b=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);b.classList.add("fv-carousel-inner");this.__.appendChild(b);let a=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);a.classList.add("fv-carousel-group",`direction-${this.slideDirection}`);b.appendChild(a);this.___.forEach((c,d)=>{a.appendChild(c)&&
c.classList.add("fv-carousel-item");c.setAttribute(SLIDE_ITEM_LABEL$$module$lib$FvCarousel$FvCarousel,`${d+1}/${this.___.length}`);c.style.width=`${this.elementWidth}px`;c.style.margin=this.elementMargin});this.rowMain=a;this.autoplay?this.autoPlay():null;this.autoplayHoverPause?this.stopOnHover():!1;this.dotsContainer?this.dots():null;this.allowDrag?this.drag():null;this.allowKeyDirection?this.keyDirection():null;this.prevBtn?this.prevBtn.addEventListener("click",()=>this.prev()):null;this.nextBtn?
this.nextBtn.addEventListener("click",()=>this.next()):null}autoPlay(){this.__autoplayId=setInterval(()=>{this.next()},this.timeout)}toIndex(b){this.rowMain.style.transition=`${this.autoplaySpeed} ease-in`;this.rowMain.style.transform=this.slideDirection.includes("horizontal")?`translate3d(-${b*this.elementWidth}px,0px,0px)`:`translate3d(0px,-${100*b}%,0px)`;this.rowMain.setAttribute(DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel,b);this.dotsBgColor()}prev(){this.___i=0<this.___i?this.___i-1:this.___.length-
1;this.toIndex(this.___i);this.dotsBgColor()}next(){this.___i=this.___i<this.___.length-1?this.___i+1:0;this.toIndex(this.___i);this.dotsBgColor()}drag(){this.__.addEventListener("drag",b=>{b=b.pageX;0!==b?this.toIndex(b/1E3):!1});this.__.addEventListener("dragend",b=>{b.pageX<this.elementWidth/2?this.prev():this.next()})}keyDirection(){this.__.addEventListener("keyup",b=>{switch(b.code){case "ArrowRight":this.next();break;case "ArrowLeft":this.prev()}})}touchmove(){this.__.addEventListener("touchmove",
b=>{b=b.pageX;0!==b?this.toIndex(b/1E3):!1})}stopOnHover(){this.__.addEventListener("mouseenter",()=>{clearInterval(this.__autoplayId)});this.__.addEventListener("mouseleave",()=>{this.autoPlay()})}dots(){this.dotsContainer.classList.add("fv-carousel-dots");let b=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);b.classList.add("fv-carousel-dots-group",`direction-${this.dotsDirection}`);this.___.forEach((a,c)=>{a=document.createElement(DIV_NODE$$module$lib$FvCarousel$FvCarousel);
a.classList.add(DOT_CLASS$$module$lib$FvCarousel$FvCarousel);a.setAttribute(DATA_POSITION$$module$lib$FvCarousel$FvCarousel,c);0===c?a.classList.add("fv-dot-active"):a.classList.add("fv-dot-inactive");b.appendChild(a);a.addEventListener("click",()=>{this.toIndex(c);this.___i=c})});this.dotsContainer.appendChild(b)}dotsBgColor(){this.dotsContainer&&this.dotsContainer.querySelectorAll(`.${DOT_CLASS$$module$lib$FvCarousel$FvCarousel}`).forEach((b,a)=>{let c=parseInt(this.rowMain.getAttribute(DATA_VISIBLE$$module$lib$FvCarousel$FvCarousel));
b.setAttribute("class",`${DOT_CLASS$$module$lib$FvCarousel$FvCarousel} fv-dot-${c===a?"active":"inactive"}`)})}}window.FvCarousel=FvCarousel$$module$lib$FvCarousel$FvCarousel;var module$lib$FvCarousel$FvCarousel={};module$lib$FvCarousel$FvCarousel.default=FvCarousel$$module$lib$FvCarousel$FvCarousel;