1class Slider extends HTMLElement{#interval;#currentSlide=0;#isAnimating=!1;#autoplayEnabled;#hideNav;static get observedAttributes(){return["duration","autoplay","hide-nav"]}constructor(){super(),this.attachShadow({mode:"open"}),this.duration=parseInt(this.getAttribute("duration"))||3e3,this.#autoplayEnabled=this.hasAttribute("autoplay")&&this.getAttribute("autoplay")!=="false",this.#hideNav=this.hasAttribute("hide-nav")}connectedCallback(){const previewImage=this.querySelector('img[slot="preview"]'),template=this.querySelector("template[shadow-content]");this.shadowRoot||this.attachShadow({mode:"open"}),template&&this.shadowRoot.appendChild(template.content.cloneNode(!0)),previewImage&&previewImage.remove(),this.slider=this.shadowRoot.querySelector(".slider"),this.slides=this.shadowRoot.querySelectorAll(".slide"),this.prevButton=this.shadowRoot.querySelector(".prev"),this.nextButton=this.shadowRoot.querySelector(".next"),this.dotsContainer=this.shadowRoot.querySelector(".dots-container"),this.setupStyles(),this.slides.length>1&&this.cloneSlides(),this.setupEventListeners(),this.initializeSlides(),this.updateNavButtonsVisibility(),this.#autoplayEnabled&&this.startAutoplay(),document.addEventListener("visibilitychange",()=>{document.hidden?this.stopAutoplay():this.#autoplayEnabled&&this.startAutoplay()}),this.addEventListener("keydown",this.handleKeydown.bind(this))}disconnectedCallback(){this.stopAutoplay(),document.removeEventListener("visibilitychange",this.handleVisibilityChange)}updateNavButtonsVisibility(){this.prevButton&&this.nextButton&&(this.#hideNav?(this.prevButton.style.display="none",this.nextButton.style.display="none"):(this.prevButton.style.display="",this.nextButton.style.display=""))}handleKeydown(event){switch(event.key){case"ArrowLeft":this.#autoplayEnabled=!1,this.stopAutoplay(),this.prevSlide();break;case"ArrowRight":this.#autoplayEnabled=!1,this.stopAutoplay(),this.nextSlide();break}}setupStyles(){const styles=document.createElement("style");styles.textContent=` 2 .visually-hidden { 3 position: absolute; 4 width: 1px; 5 height: 1px; 6 padding: 0; 7 margin: -1px; 8 overflow: hidden; 9 clip: rect(0, 0, 0, 0); 10 white-space: nowrap; 11 border: 0; 12 } 13 14 .slider-container { 15 overflow: hidden; 16 position: relative; 17 } 18 19 .slider { 20 display: flex; 21 transform: translateX(-100%); 22 transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); 23 } 24 25 .slider.no-transition { 26 transition: none; 27 } 28 29 .slide { 30 flex: 0 0 100%; 31 width: 100%; 32 } 33 34 .slide img { 35 width: 100%; 36 height: auto; 37 display: block; 38 } 39 40 .dots-container { 41 display: flex; 42 gap: 8px; 43 z-index: 1; 44 position: absolute; 45 bottom: 28px; 46 } 47 48 .dot { 49 cursor: pointer; 50 width: 16px; 51 height: 16px; 52 background-color: var(--forever); 53 border-radius: 50%; 54 cursor: pointer; 55 transition: all 0.3s ease; 56 } 57 58 .dot button { 59 display: flex; 60 align-items: center; 61 justify-content: center; 62 width: 16px; 63 height: 16px; 64 padding: 0; 65 background-color: transparent; 66 border: none; 67 cursor: pointer; 68 } 69 70 ul { 71 padding: 0; 72 margin: 0; 73 } 74 li { 75 list-style: none; 76 } 77 78 .dots-container-wrapper { 79 display: flex; 80 justify-content: center; 81 } 82 83 .dot:has(button[aria-selected="true"]) { 84 background-color: var(--gund-red); 85 transform: scale(1); 86 } 87 88 .slider-container button.next, .slider-container button.prev { 89 -ms-flex-align: center; 90 align-items: center; 91 background: var(--gund-red); 92 border: 0; 93 border-radius: 50%; 94 cursor: pointer; 95 display: -ms-flexbox; 96 display: flex; 97 height: 2em; 98 -ms-flex-pack: center; 99 justify-content: center; 100 opacity: .7; 101 padding: 0; 102 position: absolute; 103 top: 50%; 104 transform: translateY(-50%); 105 width: 3rem; 106 height: 3rem; 107 z-index: 1; 108 } 109 110 .slider-container button.prev { 111 left: 1rem; 112 } 113 114 .slider-container button.next { 115 right: 1rem; 116 } 117 118 .slide:focus-within { 119 outline: 2px solid #4A90E2; 120 outline-offset: 2px; 121 } 122 123 .slider-container button:focus-visible { 124 outline: 2px solid #4A90E2; 125 outline-offset: 2px; 126 } 127 128 button.prev:hover, button.next:hover { 129 transform: translateY(-50%) scale(1.1); 130 opacity: 1; 131 } 132 133 @media (min-width: 768px) { 134 .dots-container { 135 bottom: 40px; 136 } 137 } 138 `,this.shadowRoot.appendChild(styles)}updateSlideAttributes(realIndex){const totalRealSlides=this.slides.length-2;
138this.slides.forEach((slide,i)=>{let compareIndex;i===0?compareIndex=totalRealSlides-1:i===this.slides.length-1?compareIndex=0:compareIndex=i-1;const isActive=compareIndex===realIndex;if(slide.setAttribute("aria-current",isActive.toString()),slide.setAttribute("aria-hidden",(!isActive).toString()),isActive){const liveRegion=this.shadowRoot.querySelector('[aria-live="polite"]');if(liveRegion){const slideLabel=slide.getAttribute("aria-label");liveRegion.textContent=`Current slide: ${slideLabel}`}}})}updateDots(index){if(this.dotsContainer){const totalRealSlides=this.slides.length-2,normalizedIndex=(index%totalRealSlides+totalRealSlides)%totalRealSlides;this.dotsContainer.querySelectorAll("button").forEach((dot,i)=>{dot.setAttribute("aria-selected",(i===normalizedIndex).toString()),i===normalizedIndex?dot.removeAttribute("tabindex"):dot.setAttribute("tabindex","-1")})}}showSlide(index){if(this.#isAnimating)return;this.#isAnimating=!0,this.#currentSlide=index;const offset=-this.#currentSlide*100;this.slider.style.transform=`translateX(${offset}%)`;const totalRealSlides=this.slides.length-2,realIndex=(this.#currentSlide-1+totalRealSlides)%totalRealSlides;this.updateSlideAttributes(realIndex),this.updateDots(realIndex);const currentRealSlide=(this.#currentSlide-1)%totalRealSlides+1;this.announceSlideChange(currentRealSlide,totalRealSlides)}announceSlideChange(current,total){const announcement=`Showing slide ${current} of ${total}`,liveRegion=this.shadowRoot.querySelector('[aria-live="polite"]');liveRegion&&(liveRegion.textContent=announcement)}cloneSlides(){const firstSlideClone=this.slides[0].cloneNode(!0),lastSlideClone=this.slides[this.slides.length-1].cloneNode(!0);this.slider.appendChild(firstSlideClone),this.slider.insertBefore(lastSlideClone,this.slides[0]),this.slides=this.shadowRoot.querySelectorAll(".slide"),this.#currentSlide=1}initializeSlides(){this.updateSliderPosition()}setupEventListeners(){this.prevButton?.addEventListener("click",()=>{this.#isAnimating||(this.#autoplayEnabled=!1,this.stopAutoplay(),this.prevSlide())}),this.nextButton?.addEventListener("click",()=>{this.#isAnimating||(this.#autoplayEnabled=!1,this.stopAutoplay(),this.nextSlide())}),this.dotsContainer&&this.dotsContainer.querySelectorAll("button").forEach((button,index)=>{button.addEventListener("click",()=>{this.#isAnimating||(this.#autoplayEnabled=!1,this.stopAutoplay(),this.#currentSlide=index+1,this.updateSliderPosition())})}),this.slider.addEventListener("transitionend",()=>{this.handleTransitionEnd()});let touchStartX=0,touchStartTime=0;this.addEventListener("touchstart",e=>{touchStartX=e.changedTouches[0].screenX,touchStartTime=Date.now()}),this.addEventListener("touchend",e=>{const touchEndX=e.changedTouches[0].screenX,touchEndTime=Date.now(),diff=touchStartX-touchEndX,velocity=Math.abs(diff)/(touchEndTime-touchStartTime);!this.#isAnimating&&(Math.abs(diff)>50||velocity>.5)&&(this.#autoplayEnabled=!1,this.stopAutoplay(),diff>0?this.nextSlide():this.prevSlide())})}updateSliderPosition(transition=!0){transition||this.slider.classList.add("no-transition");const offset=-this.#currentSlide*100;this.slider.style.transform=`translateX(${offset}%)`,transition||(this.slider.offsetWidth,this.slider.classList.remove("no-transition"));const totalRealSlides=this.slides.length-2,realIndex=(this.#currentSlide-1+totalRealSlides)%totalRealSlides;this.updateSlideAttributes(realIndex),this.updateDots(realIndex)}handleTransitionEnd(){this.#isAnimating=!1;const totalSlides=this.slides.length;this.#currentSlide===0?(this.#currentSlide=totalSlides-2,this.updateSliderPosition(!1)):this.#currentSlide===totalSlides-1&&(this.#currentSlide=1,this.updateSliderPosition(!1))}prevSlide(){this.#isAnimating||(this.#isAnimating=!0,this.#currentSlide--,this.updateSliderPosition())}nextSlide(){this.#isAnimating||(this.#isAnimating=!0,this.#currentSlide++,this.updateSliderPosition())}startAutoplay(){this.duration>0&&this.#autoplayEnabled&&(this.#interval=setInterval(()=>this.nextSlide(),this.duration))}stopAutoplay(){this.#interval&&(clearInterval(this.#interval),this.#interval=null)}}customElements.define("gund-carousel",Slider); 139//# sourceMappingURL=/cdn/shop/t/43/assets/gund-carousel.js.map?v=25703965086681660581757439696
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.