https://www.naturallyseriousskin.com/cdn/shop/t/114/assets/compone…?v=42156531333062030181790876633

1customElements.get("hero-carousel")||customElements.define("hero-carousel",class extends HTMLElement{constructor(){super()}connectedCallback(){this.adjustSwiper()}adjustSwiper(){if(this.mainSlider){this.mainSlider.querySelectorAll("swiper-slide").forEach(element=>{element.classList.remove("hidden")}),Object.assign(this.mainSlider,{injectStyles:[`
2              .swiper-pagination {
3                display: flex;
4                justify-content: flex-start;
5                padding: 0 14px;
6                box-sizing: border-box;
7              }
8
9              .swiper-pagination-bullet {
10                position: relative;
11              }
12
13              .swiper-progress-bar {
14                position: absolute;
15                top: 0;
16                left: 0;
17                width: 0;
18                height: 100%;
19                border-radius: var(--swiper-pagination-bullet-border-radius);
20                background: var(--swiper-pagination-color);
21              }
22
23              .swiper-pagination-bullet-active {
24                width: var(--swiper-pagination-active-bullet-width, var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)));
25                background: transparent;
26              }
27
28              .swiper-pagination-bullet-active .swiper-progress-background {
29                position: absolute;
30                top: 0;
31                left: 0;
32                width: 100%;
33                height: 100%;
34                border-radius: var(--swiper-pagination-bullet-border-radius);
35                background: var(--swiper-pagination-bullet-inactive-color, #000);
36                opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
37              }
38
39              .swiper-pagination-bullet-active .swiper-progress-bar {
40                animation-name: countingBar;
41                animation-duration: var(--swiper-transition-duration);
42                animation-timing-function: ease-in;
43                animation-iteration-count: 1;
44                animation-direction: alternate;
45                animation-fill-mode:forwards;
46              }
47
48              @keyframes countingBar {
49                0% {width: 0;}
50                100% {width:100%;}
51              }
52
53              ::slotted(.swiper-slide__deferred-media) {
54                height: auto;
55              }
56
57              ::slotted(swiper-slide) {
58                height: auto;
59              }
60
61              @media screen and (min-width: 1460px) {
62                .swiper-pagination-bullets.swiper-pagination-horizontal {
63                  left: calc((100vw - 1460px) / 2);
64                  width: 1460px;
65                }
66              }
67            `],on:{slideChange(){this.slides.forEach((slide,index)=>{slide.querySelectorAll("deferred-media").forEach(element=>{index===this.realIndex?element.togglePlayer(!1,!1):element.togglePlayer(!0)});const gifContainer=slide.querySelector("[data-gif-container] img");if(gifContainer&&index===this.realIndex){const baseSrc=gifContainer.dataset.baseSrc,baseSrcset=gifContainer.dataset.baseSrcset;gifContainer.setAttribute("src",baseSrc.replaceAll("&width",`&reload=${Math.random()}&width`)),gifContainer.setAttribute("srcset",baseSrcset.replaceAll("&width",`&reload=${Math.random()}&width`))}})},reachEnd(){this.slides.forEach((slide,index)=>{slide.querySelector("[data-gif-container] img")!=null&&slide.querySelectorAll("[data-gif-container] img").forEach(image=>{const baseSrc=image.dataset.baseSrc,baseSrcset=image.dataset.baseSrcset;image.setAttribute("src",baseSrc.replaceAll("&width",`&reload=${Math.random()}&width`)),image.setAttribute("srcset",baseSrcset.replaceAll("&width",`&reload=${Math.random()}&width`))})})}},pagination:{renderBullet:function(index,className){return`
68                  <span class="${className}">
69                    <span class="swiper-progress-background">
70                    </span>
71                    <span class="swiper-progress-bar">
72                    </span>
73                  </span>
74                `}}});const autoplayDuration=this.mainSlider.getAttribute("autoplay-delay")||0;this.mainSlider.style.setProperty("--swiper-transition-duration",`${autoplayDuration}ms`),this.mainSlider.initialize(),this.mainSlider.style.opacity=1,this.mainSlider.classList.remove("slider-loading"),this.mainSlider.querySelector(".swiper-slide-active deferred-media")?.togglePlayer(!1,!1)}}get mainSlider(){return this.querySelector(".js-main-slider")}});
75//# sourceMappingURL=/cdn/shop/t/114/assets/component-hero-carousel.js.map?v=42156531333062030181790876633