{"id":107537,"date":"2024-12-20T15:32:54","date_gmt":"2024-12-20T08:32:54","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=107537"},"modified":"2025-01-15T16:09:47","modified_gmt":"2025-01-15T09:09:47","slug":"snowparty","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/snowparty\/","title":{"rendered":"JBL Snow Party"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"107537\" class=\"elementor elementor-107537\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-54228ca elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"54228ca\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52d8b78\" data-id=\"52d8b78\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c2aab37 elementor-widget elementor-widget-shortcode\" data-id=\"c2aab37\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t    <style>\n        #title {\n            display: none;\n        }\n        #snowparty-container {\n            max-width: var(--sizing-max-page);\n            margin: 0 auto;\n            overflow: visible;\n            position: static;\n            min-height: 200vh;\n\n            #title {\n                display: none;\n            }\n\n            @media (max-width: 767px) {\n                .is-desktop {\n                    display: none !important;\n                }\n            }\n\n            @media (min-width: 768px) {\n                .is-mobile {\n                    display: none !important;\n                }\n            }\n\n            .cta:not(:disabled), .cta:not(.active) {\n                transition: all .2s ease-in;\n\n                &:focus,\n                &:hover {\n                    outline: none;\n                }\n\n                &:hover {\n                    opacity: 0.8;\n                }\n            }\n            \n            #hero {\n                .mybanner {\n                    display: flex;\n\n                    img {\n                        width: 100%;\n                    }\n                }\n            }\n\n            #navigation {\n                position: -webkit-sticky;\n                position: sticky;\n                font-family: var(--font-body);\n                font-weight: bold;\n                padding-block: 48px;\n                background-color: #F9F5EF;\n                border-top: 1px solid var(--jblorange);\n                border-bottom: 1px solid var(--jblorange);\n                z-index: 98;\n\n                @media (max-width: 767px) {\n                    padding-block: 20px;\n                    display: flex;\n                    align-items: center;\n                    gap: 10px;\n                }\n\n                .next-nav, .prev-nav {\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                }\n\n                .inside-parent-nav {\n                    flex: 1;\n                    overflow: hidden;\n                }\n                \n                .parent-nav {\n                    margin: 0;\n                    list-style: none;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;;\n                    gap: 10px;\n                    \n                    &:::-webkit-scrollbar {\n                        display: none;\n                    }\n                    \n                    @media (max-width: 767px) {\n                        overflow: auto;\n                        padding-block: 8px;\n                        -ms-overflow-style: none;\n                        scrollbar-width: none;\n                        justify-content: unset;\n                    }\n                    \n                    li {\n                        \n                        @media (max-width: 767px) {\n                            white-space: nowrap;\n                        }\n\n                        .mycta {\n                            padding: 10px 35px;\n                            font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * -0.188)), 14px);\n                            min-height: 0vw;\n\n                            @media (max-width: 767px) {\n                                padding-inline: 25px;\n                            }\n\n                            span {\n                                position: relative;\n                                \n                                @media (max-width: 767px) {\n                                    white-space: nowrap;\n                                }\n\n                                &::after {\n                                    content: '';\n                                    opacity: 0;\n                                    width: 100%;\n                                    height: 4px;\n                                    background-color: #D82C00;\n                                    position: absolute;\n                                    bottom: -14px;\n                                    left: 0;\n                                    right: 0;\n                                    transition: opacity .2s ease-in;\n\n                                    @media (max-width: 767px) {\n                                        bottom: -11px;\n                                        height: 2px;\n                                    }\n                                }\n                            }\n\n                            li:not(.active) &:hover span::after {\n                                opacity: 1;\n                            }\n                        }\n                    }\n\n                    .active {\n                        a {\n                            background-color: #D82C00;\n                            color: white;\n                        }\n                    }\n                }\n            }\n\n            #body-content {\n                position: relative;\n\n                .top-body {\n                    position: relative;\n                    padding: 80px 140px 92px;\n\n                    @media (max-width: 767px) {\n                        padding: 40px 16px 20px;\n                        border-bottom: 1px solid var(--jblorange);\n                        margin-bottom: 38px;\n                    }\n                    \n                    .decor {\n                        position: absolute;\n                        top: 0;\n                        left: 0;\n                        right: 0;\n                        bottom: 0;\n                        z-index: -1;\n\n                        img {\n                            width: 100%;\n                            height: 100%;\n                        }\n                    }\n\n                    .decor-second {\n                        position: absolute;\n                        top: 0;\n                        left: 0;\n                        right: 0;\n                        bottom: 0;\n                        z-index: -1;\n\n                        img {\n                            width: 100%;\n                            height: 100%;\n                        }\n                    }\n                    \n                    .title-section {\n                        color: var(--jblorange);\n                        text-align: center;\n                        font-family: Grostesk-ExtraBold,Arial, Helvetica, sans-serif;\n                        font-size: clamp(48px, calc(3rem + ((1vw - 3.76px) * 3.4774)), 85px);\n                        min-height: 0vw;\n                        text-transform: uppercase;\n                        line-height: 80%;\n                        margin: 0px;\n                        margin-bottom: 40px;\n\n                        @media (max-width: 767px) {\n                            font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                            margin-bottom: 20px;\n                        }\n\n                        span {\n                            font-size: 0.565em;\n                            display: block;\n                            margin-top: -17px;\n                        }\n                    }\n\n                    .inside {\n                        display: grid;\n                        grid-template-columns: repeat(2, minmax(0, 1fr));\n                        gap: 48px;\n\n                        @media (max-width: 767px) {\n                            grid-template-columns: repeat(1, minmax(0, 1fr));\n                            gap: 10px;\n                        }\n                        \n                        .list-content {\n                            h3 {\n                                font-weight: bold;\n                                font-size: clamp(20px, calc(1.25rem + ((1vw - 3.76px) * 0.8271)), 28.8px);\n                                min-height: 0vw;\n                                margin: 0px;\n                                margin-bottom: 17px;\n                                \/* font-family: var(--font-body); *\/\n                                font-family: Grostesk-Bold,Arial, Helvetica, sans-serif;\n                                text-align: center;\n                                line-height: 120%;\n                                \n                                @media (max-width: 767px) {\n                                    font-family: var(--font-body);\n                                    margin-bottom: 10px;\n                                    text-align: left;\n                                }\n                            }\n                            \n                            p {\n                                margin: 0px;\n                                font-family: var(--font-body);\n                                font-size: 16px;\n                                text-align: center;\n\n                                @media (max-width: 767px) {\n                                    text-align: left;\n                                }\n                            }\n                        }\n                    }\n\n                    \/* .mycta {\n                        display: block;\n                        margin: 0 auto;\n                        text-align: center;\n                        padding: 10px 35px;\n                        font-family: var(--font-body);\n                        font-size: 16px;\n                        width: fit-content;\n                        background-color: #D82C00;\n                        color: white;\n                        margin-top: 71px;\n                    } *\/\n                    .mycta {\n                        font-weight: 700;\n                        text-decoration: underline;\n                        text-decoration-color: var(--c-accent);\n                        text-underline-offset: 2px;\n                        outline: none;\n                        font-family: var(--font-body);\n                        text-align: center;\n                        display: block;\n                        width: 100%;\n                        margin-top: 30px;\n                        font-size: clamp(15px, calc(0.9375rem + ((1vw - 3.76px) * 0.7519)), 23px);\n                        min-height: 0vw;\n\n                        &:hover {\n                            color: var(--c-accent);\n                        }\n                    }\n                }\n\n                .center-body {\n                    position: relative;\n\n                    .decor {\n                        position: absolute;\n                        top: 0;\n                        left: 0;\n                        right: 0;\n                        bottom: 0;\n                        z-index: -1;\n\n                        img {\n                            width: 100%;\n                            height: 100%;\n                        }\n                    }\n                    \n                    .img-wrapper {\n\n                        @media (max-width: 767px) {\n                            padding-bottom: 40px;\n                        }\n                        \n                        img {\n                            width: 100%;\n                        }\n                    }\n\n                    .text-wrapper {\n                        position: absolute;\n                        bottom: 80px;\n                        right: 0;\n                        margin-right: 144px;\n\n                        @media (max-width: 767px) {\n                            position: static;\n                            margin-right: 0px;\n                            padding: 0px 16px 20px;\n                        }\n                        \n                        .title-section {\n                            color: var(--jblorange);\n                            font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                            font-size: clamp(48px, calc(3rem + ((1vw - 3.76px) * 4.5113)), 96px);\n                            min-height: 0vw;\n                            max-width: 560px;\n                            margin: 0px;\n                            line-height: 80%;\n                            text-transform: uppercase;\n                        }\n\n                        p {\n                            max-width: 560px;\n                            font-family: var(--font-body);\n                            font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * 0.3759)), 20px);\n                            min-height: 0vw;\n                            margin: 0px;\n                        }\n                    }\n                }\n\n                .center-bottom-wrap {\n                    position: relative;\n                    \n                    .decor {\n                        position: absolute;\n                        left: 0;\n                        right: 0;\n                        bottom: 0;\n                        z-index: -1;\n                    }\n\n                    .decor-second {\n                        position: absolute;\n                        left: 0;\n                        right: 0;\n                        bottom: 0;\n                        z-index: -1;\n\n                        img {\n                            width: 100%;\n                            height: 100%;\n                        }\n                    }\n\n                    .inside {\n                        padding-top: 80px;\n                        padding-bottom: 164px;\n                        display: flex;\n\n                        @media (max-width: 767px) {\n                            flex-direction: column;\n                            padding-top: 32px;\n                            padding-bottom: 31px;\n                        }\n                        \n                        .title-section {\n                            color: var(--jblorange);\n                            font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                            font-size: clamp(48px, calc(3rem + ((1vw - 3.76px) * 4.5113)), 96px);\n                            min-height: 0vw;\n                            max-width: 560px;\n                            margin: 0px;\n                            line-height: 80%;\n                            text-transform: uppercase;\n                            margin-left: 24px;\n                            width: 30%;\n                        }\n\n                        .slider-wrapper {\n                            display: flex;\n                            gap: 40px;\n                            width: 80%;\n\n                            @media (max-width: 767px) {\n                                flex-direction: column;\n                                width: 100%;\n                                overflow: hidden;\n                            }\n\n                            .list-controller {\n                                gap: 24px;\n                                width: 50%;\n\n                                &:::-webkit-scrollbar {\n                                    display: none;\n                                }\n                    \n                                @media (max-width: 767px) {\n                                    display: flex;\n                                    flex-direction: row;\n                                    overflow-x: auto;\n                                    -ms-overflow-style: none;\n                                    scrollbar-width: none;\n                                    width: 100%;\n                                }\n\n                                .controller-slider {\n                                    display: block;\n                                    font-family: \"Kostic - Roc Grotesk Condensed Medium\",Arial, Helvetica, sans-serif;\n                                    font-size: 24px;\n                                    text-transform: uppercase;\n                                    width: 100%;\n                                    text-align: right;\n                                    line-height: 80%;\n                                    margin-block: 24px;\n                                    white-space: nowrap;\n\n                                    @media (max-width: 767px) {\n                                        margin-block: 0px;\n                                    }\n\n                                    &:not(.active):hover {\n                                        color: var(--jblorange);\n                                    }\n\n                                    &:first-child {\n                                        margin-top: 0;\n                                    }\n\n                                    &:last-child {\n                                        margin-bottom: 0;\n                                    }\n                                }\n\n                                .active {\n                                    font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                                    font-size: clamp(40px, calc(2.5rem + ((1vw - 3.76px) * 0.7519)), 48px);\n                                    min-height: 0vw;\n                                    color: var(--jblorange);\n\n                                    &:before {\n                                        content: 'arrow_forward';\n                                        margin-top: 8px;\n                                        font-family: var(--font-icon);\n                                        font-weight: 700;\n                                        font-style: normal;\n                                        font-size: 1em;\n                                        -webkit-font-feature-settings: \"liga\";\n                                        -webkit-font-smoothing: antialiased;\n                                        font-variation-settings: \"FILL\" 1;\n                                        word-wrap: normal;\n                                        direction: ltr;\n                                        vertical-align: sub;\n\n                                        @media (max-width: 767px) {\n                                            display: none;\n                                        }\n                                    }\n                                }\n                            }\n\n                            .right-side {\n                                width: 100%;\n\n                                @media (max-width: 767px) {\n                                    display: flex;\n                                    flex-direction: column;\n                                }\n                                \n                                .content-wrap {\n                                    \n                                    @media (max-width: 767px) {\n                                        order: 3;\n                                        padding-inline: 16px;\n                                    }\n                                    \n                                    .content-slider {\n                                        p {\n                                            max-width: 560px;\n                                            font-family: var(--font-body);\n                                            font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * 0.3759)), 20px);\n                                            min-height: 0vw;\n                                            margin: 0px;\n                                            line-height: 140%;\n                                            margin-bottom: 24px;\n                                        }\n                                    }\n                                }\n                                .all-img-slider {\n                                    position: relative;\n                                    margin-top: 40px;\n                                    width: 479px; \n                                    height: 279px;\n                                    \n                                    @media (max-width: 767px) {\n                                        order: 1;\n                                        margin-top: 0px;\n                                        width: 100% !important;\n                                    }\n\n                                    @media (min-width: 668px) and (max-width: 767px) {\n                                        height: 379px;\n                                    }\n\n                                    @media (min-width: 540px) and (max-width: 667px) {\n                                        height: 330px;\n                                    }\n\n                                    .image-slider {\n                                        position: absolute;\n                                    }\n                                }\n\n                                .title-section {\n                                    order: 2;\n                                    width: 100%;\n                                    margin-left: 0px;\n                                    font-size: 64px;\n                                    text-align: center;\n                                    max-width: none;\n                                    \/* margin-top: 30px; *\/\n                                    margin-bottom: 29px;\n                                }\n                            }\n                        }\n                    }\n                }\n\n                .adventure-mountain {\n                    display: flex;\n                    justify-content: space-between;\n                    padding-block: 59px;\n\n                    @media (max-width: 767px) {\n                        flex-direction: column;\n                        padding: 30px 16px;\n                    }\n\n                    .left-side {\n                        position: relative;\n                        display: flex;\n                        justify-content: center;\n                        align-items: center;\n\n                        @media (max-width: 767px) {\n                            order: 2;\n                            padding-top: 32px;\n                        }\n\n                        .fly-wrap {\n                            display: block;\n                            margin-left: 134px;\n\n                            @media (max-width: 767px) {\n                                margin-left: 0px;\n                                padding-top: 24px;\n                                border-top: 2px solid var(--jblorange);\n                            }\n                        }\n                        \n                        .text-wrap {\n                            max-width: 443px;\n\n                            .title-section {\n                                color: var(--jblorange);\n                                font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                                font-size: clamp(28px, calc(1.75rem + ((1vw - 3.76px) * 3.7594)), 68px);\n                                min-height: 0vw;\n                                max-width: 560px;\n                                margin: 0px;\n                                margin-bottom: 8px;\n                                line-height: 80%;\n                                text-transform: uppercase;\n                            }\n\n                            p {\n                                font-family: var(--font-body);\n                                font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * 0.282)), 19px);\n                                min-height: 0vw;\n                                margin: 0px;\n                                line-height: 140%;\n                            }\n                        }\n                    }\n\n                    .right-side {\n\n                        @media (max-width: 767px) {\n                            order: 1;\n                        }\n                        \n                        img {\n                            width: 100%;\n                        }\n                    }\n                }\n\n                .bottom-body {\n                    background-color: var(--c-cream);\n                    padding: 40px 24px 68px;\n\n                    @media (max-width: 767px) {\n                        padding: 0px;\n                        padding-top: 43px;\n                    }\n\n                    .video-wrap {\n                        margin-bottom: 40px;\n\n                        @media (max-width: 767px) {\n                            width: 100%;\n                            margin-bottom: 0px;\n                        }\n                        \n                        img {\n                            width: 100%;\n                        }\n                    }\n\n                    .text-wrap {\n                        display: grid;\n                        gap: 32px;\n                        grid-template-columns: repeat(2, minmax(0, 1fr));\n\n                        @media (max-width: 767px) {\n                            grid-template-columns: repeat(1, minmax(0, 1fr));\n                            padding: 32px 12px 48px;\n                        }\n                        \n                        .title-section {\n                            color: var(--jblorange);\n                            font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                            font-size: clamp(40px, calc(2.5rem + ((1vw - 3.76px) * 0.7519)), 48px);\n                            min-height: 0vw;\n                            margin: 0px;\n                            line-height: 90%;\n                            text-transform: uppercase;\n                        }\n\n                        p {\n                            font-family: var(--font-body);\n                            font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * 0.3759)), 20px);\n                            min-height: 0vw;\n                            margin: 0px;\n                            line-height: 140%;\n                        }\n                    }\n                }\n            }\n\n            #bottom-essentials {\n                position: relative;\n                padding-top: 80px;\n\n                @media (max-width: 767px) {\n                    padding-bottom: 18px;\n                }\n\n                .decor {\n                    position: absolute;\n                    top: 0;\n                    right: 0;\n                    z-index: -1;\n                }\n                .decor-second {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    right: 0;\n                    z-index: -1;\n\n                    img {\n                        width: 100%;\n                    }\n                }\n\n                .inside {\n                    .title-section {\n                        color: black;\n                        font-family: \"Kostic - Roc Grotesk Condensed Bold\",Arial, Helvetica, sans-serif;\n                        font-size: clamp(40px, calc(2.5rem + ((1vw - 3.76px) * 3.0075)), 72px);\n                        min-height: 0vw;\n                        margin: 0px;\n                        line-height: 90%;\n                        text-transform: uppercase;\n                        text-align: center;\n\n                        @media (max-width: 767px) {\n                            padding-inline: 26px;                            \n                            margin-bottom: 16px;\n                        }\n                    }\n                    .subtitle-section {\n                        font-family: var(--font-body);\n                        font-size: clamp(16px, calc(1rem + ((1vw - 3.76px) * 0.282)), 19px);\n                        min-height: 0vw;\n                        line-height: 140%;\n                        margin: 0px;\n                        text-align: center;\n                        max-width: 672px;\n                        margin: 0 auto;\n                        margin-bottom: 16px;\n\n                        @media (max-width: 767px) {\n                            padding-inline: 26px;                               \n                        }\n                    }\n\n                    .mycta {\n                        display: block;\n                        margin: 0 auto;\n                        text-align: center;\n                        padding: 9px 22px;\n                        font-family: var(--font-body);\n                        font-size: 16px;\n                        width: fit-content;\n                        background-color: #D82C00;\n                        color: white;\n                    }\n\n                    .slider-container {\n                        margin-top: 64px;\n                        display: flex;\n                        gap: 32px;\n                        padding-bottom: 30px;\n\n                        @media (max-width: 767px) {\n                            flex-direction: column;\n                            -ms-flex-direction: column;\n                        }\n\n                        .left-side {\n                            padding-left: 24px;\n                            width: 100%;\n                            max-width: calc(469px + 24px);\n\n                            @media (max-width: 767px) {\n                                padding-left: 0px;\n                            }\n                            \n                            img {\n                                width: 100%;\n\n                                @media (max-width: 767px) {\n                                    width: 100%; \/* Gambar akan menggunakan lebar penuh dari elemen induknya *\/\n                                    height: auto; \/* Pertahankan aspek rasio gambar *\/\n                                    object-fit: cover;                                    \n                                }\n                            }\n                        }\n\n                        .right-side {\n                            overflow: hidden;\n                            position: relative;\n                            padding-top: 48px;\n\n                            @media (max-width: 767px) {\n                                padding-top: 0px;\n                            }\n\n                            .slider-wrap {\n                                overflow: hidden;\n                                display: flex;\n\n                                .content-slider {\n                                    background-color: #F9F5EF;\n                                    padding: 16px;\n                                    height: auto;\n                                    margin-inline: calc(35px \/ 2);\n\n                                    &:nth-child(odd) {\n                                        margin-top: 43px;\n\n                                        @media (max-width: 767px) {\n                                            margin-top: 0;\n                                        }\n                                    }\n\n                                    img {\n                                        width: 100%;\n                                    }\n\n                                    .bottom-wrap {\n                                        margin-top: 16px;\n                                        padding-top: 16px;\n                                        border-top: 1px solid var(--jblorange);\n                                        display: flex;\n                                        flex-direction: column;\n                                        gap: 8px;\n                                        justify-content: space-between;\n                                        \/* height: 100%; *\/\n                                        \n                                        .wrap-top {\n                                            \n                                            .name-product {\n                                                font-family: var(--font-body);\n                                                font-size: 16px;\n                                                margin: 0px;\n                                                font-weight: bold;\n                                                margin-bottom: 6px;\n                                                line-height: 120%;\n                                            }\n                                            \n                                            .description {\n                                                font-family: var(--font-body);\n                                                font-size: 14px;\n                                                margin: 0px;\n                                                line-height: 120%;\n                                            }\n                                        }\n                                        \n                                        .price {\n                                            font-family: var(--font-body);\n                                            font-size: 16px;\n                                            font-weight: bold;\n                                            margin: 0px;\n                                            margin-top: 16.5px;\n                                            line-height: 120%;\n                                        }\n                                    }\n                                }\n\n                            }\n                            .controller-slider {\n                                margin-top: 40px;\n                                display: flex;\n                                gap: 16px;\n                                position: relative;\n                                align-items: center;\n                                \n                                @media (max-width: 767px) {\n                                        padding-inline: 16px;\n                                    }\n                                \n                                .button-wrap {\n                                    display: flex;\n                                    gap: 16px;\n                                    justify-content: center;\n\n                                    button {\n                                        display: flex;\n                                        justify-content: center;\n                                        align-items: center;\n                                    }\n                                }\n\n                                .line-wrap {\n                                    display: flex;\n                                    width: 100%;\n                                    position: relative;\n\n\n                                    &:before {\n                                        content: '';\n                                        width: 100%;\n                                        height: 2px;\n                                        background-color: rgba(0, 0, 0, 0.2);\n                                        position: absolute;\n                                        top: 50%;\n                                        left: 0;\n                                        transform: translateY(-50%);\n                                        z-index: -1;\n                                    }\n\n                                    .line {\n                                        width: 100%;\n                                        height: 2px;\n                                        background-color: black;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    <\/style>\n    <main id=\"snowparty-container\">\n        <section id=\"hero\">\n            <picture class=\"mybanner is-desktop\">\n                <source\n                    srcset=\"                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-2000.webp 2000w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1600.webp 1600w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1200.webp 1200w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1024.webp 1024w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-768.webp 768w,                    \"\n                    sizes=\"                        (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1600px                    \"\n                    type=\"image\/webp\"\n                >\n                <img fetchpriority=\"high\" decoding=\"async\" \n                    src=\"\/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-768.webp\"\n                    srcset=\"                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-2000.webp 2000w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1600.webp 1600w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1200.webp 1200w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-1024.webp 1024w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-768.webp 768w,                    \"\n                    sizes=\"                        (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1600px                    \"\n                    width=\"2000\" \n                    height=\"1115\"\n                    alt=\"Banner Snow Party\"\n                    loading=\"eager\"\n                >\n            <\/picture>\n            <picture class=\"mybanner is-mobile\">\n                <source\n                    srcset=\"                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-600.webp 600w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-300.webp 300w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-150.webp 150w                    \"\n                    sizes=\"                        (max-width: 600px) 300px,                         600px                    \"\n                    type=\"image\/webp\"\n                >\n                <img decoding=\"async\" \n                    src=\"\/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-768.webp\"\n                    srcset=\"                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-600.webp 600w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-300.webp 300w,                        \/wp-content\/uploads\/2025\/01\/snowparty-hero-banner-1-150.webp 150w                    \"\n                    sizes=\"                        (max-width: 600px) 300px,                         600px                    \"\n                    width=\"768\" \n                    height=\"1104\"\n                    alt=\"Banner Snow Party\"\n                    loading=\"eager\"\n                >\n            <\/picture>\n        <\/section>\n        <section id=\"navigation\">\n            <button class=\"cta prev-nav is-mobile\" aria-label=\"Previous\" disabled>\n                <svg width=\"40\" height=\"40\" viewbox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M23 12.9999L16 19.9999L23 27.0001\" stroke=\"black\" stroke-width=\"4\" stroke-miterlimit=\"10\" stroke-linecap=\"square\"\/>\n                <\/svg>\n            <\/button>\n            <div class=\"inside-parent-nav\">\n                <ul class=\"parent-nav\">\n                    <!-- <li class=\"active\">\n                        <a href=\"#\" class=\"cta mycta\" data-id=\"\">\n                            <span>Enter to Win<\/span>\n                        <\/a>\n                    <\/li> -->\n                    <li>\n                        <a href=\"#\" class=\"cta mycta\" data-id=\"prizes\">\n                            <span>Prizes<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#\" class=\"cta mycta\" data-id=\"music\">\n                            <span>Music<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#\" class=\"cta mycta\" data-id=\"community\">\n                            <span>Community<\/span>\n                        <\/a>\n                    <\/li>\n                    <li>\n                        <a href=\"#\" class=\"cta mycta\" data-id=\"activities\">\n                            <span>Activities<\/span>\n                        <\/a>\n                    <\/li>\n                <\/ul>\n            <\/div>\n            <button class=\"cta next-nav is-mobile\" aria-label=\"Next\">\n                <svg width=\"40\" height=\"40\" viewbox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M16 27.0001L23 20.0001L16 12.9999\" stroke=\"black\" stroke-width=\"4\" stroke-miterlimit=\"10\" stroke-linecap=\"square\"\/>\n                <\/svg>\n            <\/button>\n        <\/section>\n        <section id=\"body-content\">\n            <div class=\"top-body\" id=\"prizes\">\n                <div class=\"decor is-desktop\" role=\"presentation\">\n                    <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-topwrap-background-desktop.webp\" width=\"1440\" height=\"766\">\n                <\/div>\n                <div class=\"decor-second is-mobile\" role=\"presentation\">\n                    <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-topwrap-background-mobile-1.webp\" width=\"375\" height=\"843\">\n                <\/div>\n                <h2 class=\"title-section\">\n                    Enter to win a trip to snow party\n                    <span class=\"is-desktop\">and all prizes below<\/span>\n                <\/h2>\n                <div class=\"inside\" style=\"\/*display: none;*\/\">\n                                            <div class=\"list-content\">\n                            <h3>Two Tickets to JBL Snow Party<\/h3>\n                            <p>Join us in Val Thorens, France for JBL Snow Party.<\/p>\n                        <\/div>\n                                            <div class=\"list-content\">\n                            <h3>Two Round-Trip Airfare\/Train Tickets<\/h3>\n                            <p>Two round-trip airfare tickets to the JBL Snow Party at Val Thorens Mountain.<\/p>\n                        <\/div>\n                                            <div class=\"list-content\">\n                            <h3>Two Nights Hotel Accommodation<\/h3>\n                            <p>Stay for two, all-inclusive nights.<\/p>\n                        <\/div>\n                                            <div class=\"list-content\">\n                            <h3>Ski Hire<\/h3>\n                            <p>Get your gear on us, with ski rental.<\/p>\n                        <\/div>\n                                    <\/div>\n                <a href=\"\/en\/snowparty\/tnc\/\" class=\"cta mycta\">Promotion Terms and Conditions<\/a>\n            <\/div>\n            <div class=\"center-body\" id=\"music\">\n                <div class=\"decor is-mobile\" role=\"presentation\">\n                    <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbody-decor-mobile.webp\" width=\"375\" height=\"532\">\n                <\/div>\n                <div class=\"img-wrapper is-desktop\">\n                    <img loading=\"lazy\" decoding=\"async\" \n                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbody-decorandimg.webp\" \n                        alt=\"New Sound\"\n                        width=\"1315\"\n                        height=\"805\"\n                    >\n                <\/div>\n                <div class=\"img-wrapper is-mobile\">\n                    <img loading=\"lazy\" decoding=\"async\" \n                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbody.webp\" \n                        alt=\"New Sound\"\n                        width=\"941\"\n                        height=\"529\"\n                    >\n                <\/div>\n                <div class=\"text-wrapper\">\n                    <h2 class=\"title-section\">\n                        A new sound hits the slopes\n                    <\/h2>\n                    <p>Year six of Snow Party on Val Thorens is all about new sounds, talent, and friends. Get ready to vibe to the infectious music of world-renowned DJ Martin Garrix and up-and-coming artists discovered by Martin and JBL, who know how to make the mountain move.<\/p>\n                <\/div>\n            <\/div>\n            <!-- <div class=\"center-bottom-wrap\">\n                <div class=\"decor is-desktop\" role=\"presentation\">\n                    <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-bg.webp\" width=\"1440\" height=\"707\" loading=\"lazy\">\n                <\/div>\n                <div class=\"decor-second is-mobile\" role=\"presentation\">\n                    <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-bgmobile.webp\" width=\"375\" height=\"607\" loading=\"lazy\">\n                <\/div>\n                <div class=\"inside\">\n                    <h2 class=\"title-section is-desktop\">Temui Para Artis<\/h2>\n                    <div class=\"slider-wrapper\">\n                        <div class=\"list-controller\">\n                                                                                                <button \n                                        class=\"controller-slider cta active\" \n                                        data-id=\"jane-doe\">\n                                        Jane Doe                                    <\/button>\n                                                                    <button \n                                        class=\"controller-slider cta \" \n                                        data-id=\"mike-michaelson\">\n                                        Mike Michaelson                                    <\/button>\n                                                                    <button \n                                        class=\"controller-slider cta \" \n                                        data-id=\"sammy-ham\">\n                                        Sammy Ham                                    <\/button>\n                                                                    <button \n                                        class=\"controller-slider cta \" \n                                        data-id=\"lindon-freedman\">\n                                        Lindon Freedman                                    <\/button>\n                                                                                    <\/div>\n                        <div class=\"right-side\">\n                            <div class=\"content-wrap\">\n                                                                                                            <div \n                                            class=\"content-slider\" \n                                            id=\"jane-doe\" \n                                            data-id=\"jane-doe\" \n                                                                                    >\n                                            <p>1Lorem ipsum odor amet, consectetuer adipiscing elit. Euismod leo ex sociosqu cubilia dis torquent elementum. Proin auctor proin est himenaeos senectus. Acurae feugiat eu nascetur vel dapibus.<\/p>\n                                        <\/div>\n                                                                            <div \n                                            class=\"content-slider\" \n                                            id=\"mike-michaelson\" \n                                            data-id=\"mike-michaelson\" \n                                            style=\"display:none;\"                                        >\n                                            <p>2Lorem ipsum odor amet, consectetuer adipiscing elit. Euismod leo ex sociosqu cubilia dis torquent elementum. Proin auctor proin est himenaeos senectus. Acurae feugiat eu nascetur vel dapibus.<\/p>\n                                        <\/div>\n                                                                            <div \n                                            class=\"content-slider\" \n                                            id=\"sammy-ham\" \n                                            data-id=\"sammy-ham\" \n                                            style=\"display:none;\"                                        >\n                                            <p>3Lorem ipsum odor amet, consectetuer adipiscing elit. Euismod leo ex sociosqu cubilia dis torquent elementum. Proin auctor proin est himenaeos senectus. Acurae feugiat eu nascetur vel dapibus.<\/p>\n                                        <\/div>\n                                                                            <div \n                                            class=\"content-slider\" \n                                            id=\"lindon-freedman\" \n                                            data-id=\"lindon-freedman\" \n                                            style=\"display:none;\"                                        >\n                                            <p>4Lorem ipsum odor amet, consectetuer adipiscing elit. Euismod leo ex sociosqu cubilia dis torquent elementum. Proin auctor proin est himenaeos senectus. Acurae feugiat eu nascetur vel dapibus.<\/p>\n                                        <\/div>\n                                                                <\/div>\n                            <h2 class=\"title-section is-mobile\">Temui Para Artis<\/h2>\n                            <div class=\"all-img-slider\">\n                                                                                                <style>\n                                        .image-slider-0 {\n                                            z-index: 4;\n                                            top: 0px;\n                                            left: 0px;\n\n                                            @media (max-width: 767px) {\n                                                                                                    top: 0px;\n                                                    width: 80%;\n                                                    left: 50%;\n                                                    transform: translateX(-50%) scale(1.05);\n                                                                                            }\n                                        }\n                                    <\/style>\n                                    <img decoding=\"async\" \n                                        class=\"image-slider image-slider-0\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-janedoe.webp\" \n                                        alt=\"Jane Doe\"\n                                        loading=\"lazy\"\n                                        id=\"jane-doe\"\n                                    >\n                                                                    <style>\n                                        .image-slider-1 {\n                                            z-index: 3;\n                                            top: 20px;\n                                            left: 20px;\n\n                                            @media (max-width: 767px) {\n                                                                                                    width: 80%;\n                                                    transform: scale(0.9);\n                                                    right: -8px;\n                                                    left: auto;\n                                                    top: auto;\n                                                                                            }\n                                        }\n                                    <\/style>\n                                    <img decoding=\"async\" \n                                        class=\"image-slider image-slider-1\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-mikemichaelson.webp\" \n                                        alt=\"Mike Michaelson\"\n                                        loading=\"lazy\"\n                                        id=\"mike-michaelson\"\n                                    >\n                                                                    <style>\n                                        .image-slider-2 {\n                                            z-index: 2;\n                                            top: 40px;\n                                            left: 40px;\n\n                                            @media (max-width: 767px) {\n                                                                                                    width: 80%;\n                                                    transform: scale(0.9);\n                                                    left: -8px;\n                                                    top: auto;\n                                                                                            }\n                                        }\n                                    <\/style>\n                                    <img decoding=\"async\" \n                                        class=\"image-slider image-slider-2\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-sammyham.webp\" \n                                        alt=\"Sammy Ham\"\n                                        loading=\"lazy\"\n                                        id=\"sammy-ham\"\n                                    >\n                                                                    <style>\n                                        .image-slider-3 {\n                                            z-index: 1;\n                                            top: 60px;\n                                            left: 60px;\n\n                                            @media (max-width: 767px) {\n                                                                                                    display: none;\n                                                                                            }\n                                        }\n                                    <\/style>\n                                    <img decoding=\"async\" \n                                        class=\"image-slider image-slider-3\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-centerbottomwrap-lindonfreedman.webp\" \n                                        alt=\"Lindon Freedman\"\n                                        loading=\"lazy\"\n                                        id=\"lindon-freedman\"\n                                    >\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div> -->\n            <div class=\"adventure-mountain\">\n                <div class=\"left-side\">\n                    <div class=\"fly-wrap\">\n                        <div class=\"text-wrap\">\n                            <h2 class=\"title-section\">Adventure on the mountain<\/h2>\n                            <p>Try all the sports and winter activities Val Thorens offers, whatever your experience. Hit the slopes, gear up for tobogganing, and vibe to amazing live music.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"right-side\">\n                    <img loading=\"lazy\" decoding=\"async\"\n                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-adventuremountain.webp\" \n                        alt=\"Adventure on the mountain\"\n                        width=\"799\"\n                        height=\"501\"\n                    >\n                <\/div>\n            <\/div>\n            <div class=\"bottom-body\" id=\"community\">\n                <div class=\"video-wrap\">\n                    <iframe width=\"935\" height=\"526\" src=\"https:\/\/www.youtube.com\/embed\/xtrm5vj74DM\" title=\"JBL SNOW PARTY IS BACK \ud83c\udf89\u2744\ufe0f\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n                <\/div>\n                <div class=\"text-wrap\">\n                    <h2 class=\"title-section\">Expand your community, Discover New Artists<\/h2>\n                    <p>Every year, JBL\u2019s Snow Party unites people from all over Europe for the adventure of a lifetime on the mountains at Val Thorens. Come together with friends, old and new, to celebrate music, sports, self-expression and so much more. Ready to Snow Party?<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n        <section id=\"bottom-essentials\">\n            <div class=\"decor is-desktop\" role=\"presentation\">\n                <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-decor.webp\" width=\"530\" height=\"271\">\n            <\/div>\n            <div class=\"decor-second is-mobile\" role=\"presentation\">\n                <img loading=\"lazy\" decoding=\"async\" aria-hidden=\"true\" src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-decor-second.webp\" width=\"375\" height=\"198\">\n            <\/div>\n            <div class=\"inside\" id=\"activities\">\n                <h2 class=\"title-section\">Shop snow party essentials<\/h2>\n                <p class=\"subtitle-section\">Discover the audio products that power the party \u2013 shop JBL favorites and elevate your sound experience.<\/p>\n                <a href=\"\/en\/all-products\/\" title=\"Snow Party Now\" class=\"cta mycta\">Shop Now<\/a>\n                <div class=\"slider-container\">\n                    <div class=\"left-side\">\n                        <img loading=\"lazy\" decoding=\"async\" \n                            src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-static.webp\" \n                            width=\"469\"\n                            height=\"579\"\n                            alt=\"JBL Snow Party\"\n                        >\n                    <\/div>\n                    <div class=\"right-side\">\n                        <div class=\"slider-wrap\">\n                                                            <div class=\"content-slider\">\n                                    <img loading=\"lazy\" decoding=\"async\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-partyboxstage320.webp\" \n                                        alt=\"JBL PartyBox Stage  320 Illustration\"\n                                        width=\"250\"\n                                        height=\"250\"\n                                    >\n                                    <div class=\"bottom-wrap\">\n                                        <div class=\"wrap-top\">\n                                            <a class=\"name-product\" href=\"#\">JBL PartyBox Stage 320<\/a>\n                                            <p class=\"description\">Portable party speaker with wheels<\/p>\n                                        <\/div>\n                                        <p class=\"price\"><\/p>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"content-slider\">\n                                    <img loading=\"lazy\" decoding=\"async\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-tourpro2.webp\" \n                                        alt=\"JBL Tour Pro 2\"\n                                        width=\"250\"\n                                        height=\"250\"\n                                    >\n                                    <div class=\"bottom-wrap\">\n                                        <div class=\"wrap-top\">\n                                            <a class=\"name-product\" href=\"#\">JBL Tour Pro 2<\/a>\n                                            <p class=\"description\">True Wireless noise-cancelling earbuds<\/p>\n                                        <\/div>\n                                        <p class=\"price\">Rp2.999.400<\/p>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"content-slider\">\n                                    <img loading=\"lazy\" decoding=\"async\" \n                                        src=\"\/wp-content\/uploads\/2024\/12\/snowparty-essentials-xtreme4.webp\" \n                                        alt=\"JBL Xtreme 4\"\n                                        width=\"250\"\n                                        height=\"250\"\n                                    >\n                                    <div class=\"bottom-wrap\">\n                                        <div class=\"wrap-top\">\n                                            <a class=\"name-product\" href=\"#\">JBL Xtreme 4<\/a>\n                                            <p class=\"description\">Portable speaker with strap<\/p>\n                                        <\/div>\n                                        <p class=\"price\">Rp4.319.200<\/p>\n                                    <\/div>\n                                <\/div>\n                                                    <\/div>\n                        <div class=\"controller-slider\">\n                            <div class=\"button-wrap\">\n                                <button class=\"cta slider-prev\" aria-label=\"Previous\" disabled>\n                                    <svg width=\"40\" height=\"40\" viewbox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M23 12.9999L16 19.9999L23 27.0001\" stroke=\"black\" stroke-width=\"4\" stroke-miterlimit=\"10\" stroke-linecap=\"square\"\/>\n                                    <\/svg>\n                                <\/button>\n                                <button class=\"cta slider-next\" aria-label=\"Next\">\n                                    <svg width=\"40\" height=\"40\" viewbox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M16 27.0001L23 20.0001L16 12.9999\" stroke=\"black\" stroke-width=\"4\" stroke-miterlimit=\"10\" stroke-linecap=\"square\"\/>\n                                    <\/svg>\n                                <\/button>\n                            <\/div>\n                            <div class=\"line-wrap\">\n                                <div class=\"line\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    <script>\n        jQuery(document).ready(function($) {\n            const insideTopstrip = jQuery('.slider-wrap');\n            const $line = jQuery('.line');\n\n            insideTopstrip.slick({\n                slidesToShow: 3,\n                slidesToScroll: 1,\n                infinite: false,\n                arrows: false,\n                centerMode: false,\n                responsive: [\n                    {\n                        breakpoint: 767,\n                        settings: {\n                            slidesToShow: 2,\n                            slidesToScroll: 1,\n                            centerMode: false,\n                        }\n                    },\n                    {\n                        breakpoint: 480,\n                        settings: {\n                            slidesToShow: 1,\n                            slidesToScroll: 1,\n                            centerMode: true,\n                        }\n                    }\n                ]\n            });\n\n            function updateLineWidth(currentSlide, totalSlides, slidesToShow) {\n                const widthPercentage = ((currentSlide + slidesToShow) \/ totalSlides) * 100;\n                $line.css('width', widthPercentage + '%');\n            }\n\n            insideTopstrip.on('afterChange', function (event, slick, currentSlide) {\n                const slidesToShow = slick.options.slidesToShow; \n                const totalSlides = slick.slideCount; \n                updateLineWidth(currentSlide, totalSlides, slidesToShow);\n            });\n\n            insideTopstrip.on('init', function (event, slick) {\n                const slidesToShow = slick.options.slidesToShow; \n                const totalSlides = slick.slideCount; \n                updateLineWidth(0, totalSlides, slidesToShow); \n            });\n\n            insideTopstrip.slick('setPosition'); \n\n            function updateButtonStatus(currentIndex, slideCount, slidesToShow) {\n            const $prevButton = jQuery('.slider-prev');\n            const $nextButton = jQuery('.slider-next');\n\n            \n            if (currentIndex === 0) {\n                $prevButton.prop('disabled', true); \n            } else {\n                $prevButton.prop('disabled', false); \n            }\n\n            \n            if (currentIndex >= slideCount - slidesToShow) {\n                $nextButton.prop('disabled', true); \n            } else {\n                $nextButton.prop('disabled', false); \n            }\n\n            updateLineWidth(currentIndex, slideCount, slidesToShow);\n        }\n\n        insideTopstrip.on('init afterChange', function (event, slick, currentSlide = 0) {\n            const slideCount = slick.slideCount; \n            const slidesToShow = slick.options.slidesToShow; \n            updateButtonStatus(currentSlide, slideCount, slidesToShow); \n        });\n\n            updateLineWidth(0, 5);\n\n            jQuery('.slider-prev').on('click', function () {\n                insideTopstrip.slick('slickPrev');\n            });\n\n            jQuery('.slider-next').on('click', function () {\n                insideTopstrip.slick('slickNext');\n            });\n\n            \/\/ ** Stacking Image Artist ** \/\/\n\n            const $listController = jQuery('.list-controller');\n            const $descriptiontWrap = jQuery('.content-wrap');\n            const $allImgSlider = jQuery('.all-img-slider');\n\n            $listController.on('click', '.controller-slider:not(.active)', function() {\n                const $this = jQuery(this);\n                const id = $this.data('id');\n\n                $listController.find('.controller-slider').removeClass('active');\n                $this.addClass('active');\n\n                $descriptiontWrap.find('.content-slider').hide();\n                $descriptiontWrap.find('.content-slider[data-id=\"' + id + '\"]').show();\n\n                const $dataArray = [{\"src\":\"\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/snowparty-centerbottomwrap-janedoe.webp\",\"alt\":\"Jane Doe\",\"id\":\"jane-doe\"},{\"src\":\"\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/snowparty-centerbottomwrap-mikemichaelson.webp\",\"alt\":\"Mike Michaelson\",\"id\":\"mike-michaelson\"},{\"src\":\"\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/snowparty-centerbottomwrap-sammyham.webp\",\"alt\":\"Sammy Ham\",\"id\":\"sammy-ham\"},{\"src\":\"\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/snowparty-centerbottomwrap-lindonfreedman.webp\",\"alt\":\"Lindon Freedman\",\"id\":\"lindon-freedman\"}];\n\n                const $allChildren = $allImgSlider.children('.image-slider');\n                const totalChildren = $allChildren.length;\n\n                const targetIndex = $dataArray.findIndex(function(item) {\n                    return item.id === id;\n                });\n\n                const $newArray = $dataArray.slice(targetIndex).concat($dataArray.slice(0, targetIndex).reverse());\n\n                $allChildren.each(function(index, element) {\n                    const $this = jQuery(element);\n                    const $newData = $newArray[index];\n\n                    $this.attr('src', $newData.src);\n                    $this.attr('data-id', $newData.id);\n                    $this.attr('id', $newData.id);\n                    $this.attr('aria-label', $newData.alt);\n                    $this.attr('alt', $newData.alt);\n                });\n            });\n\n            \/\/ ** MENU NAV ** \/\/\n\n            const $navItems = jQuery('.parent-nav a.mycta'); \/\/ Semua link dengan class mycta\n\n            function checkVisibility() {\n                $navItems.each(function () {\n                    const $this = jQuery(this);\n                    const targetId = $this.data('id');\n                    const $targetElement = jQuery('#' + targetId);\n\n                    if ($targetElement.length) {\n                        const targetOffset = $targetElement.offset().top;\n                        const scrollTop = jQuery(window).scrollTop();\n                        const windowHeight = jQuery(window).height();\n\n                        \/\/ Hitung posisi 25% dari tinggi elemen\n                        const targetHeight = $targetElement.outerHeight();\n                        const threshold = targetOffset + targetHeight * 0.25;\n\n                        \/\/ Cek apakah elemen sudah 25% terlihat\n                        if (threshold >= scrollTop && targetOffset < scrollTop + windowHeight) {\n                            $navItems.parent().removeClass('active'); \/\/ Hapus active dari semua li\n                            $this.parent().addClass('active'); \/\/ Tambahkan active pada li terkait\n                        }\n                    }\n                });\n            }\n\n            \/\/ Scroll ke elemen saat link diklik\n            $navItems.on('click', function (e) {\n                e.preventDefault(); \/\/ Mencegah default behavior dari link\n\n                const targetId = jQuery(this).data('id');\n                const $targetElement = jQuery('#' + targetId);\n\n                if ($targetElement.length) {\n                    jQuery('html, body').animate(\n                        {\n                            scrollTop: $targetElement.offset().top,\n                        },\n                        800, \/\/ Durasi animasi (800ms)\n                        'swing'\n                    );\n                }\n            });\n\n            \/\/ Jalankan saat scroll atau resize\n            jQuery(window).on('scroll resize', function () {\n                checkVisibility();\n            });\n\n            \/\/ Jalankan saat halaman pertama kali dimuat\n            checkVisibility();\n            \/\/ ** Scroll API ** \/\/\n\n            const scrollContainer = document.querySelector('#navigation .parent-nav');\n            const prevButton = document.querySelector('#navigation .prev-nav');\n            const nextButton = document.querySelector('#navigation .next-nav');\n\n            function updateButtonStatus() {\n                const scrollLeft = scrollContainer.scrollLeft;\n                const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;\n\n                prevButton.disabled = scrollLeft <= 0;\n                nextButton.disabled = scrollLeft >= maxScrollLeft;\n            }\n\n            prevButton.addEventListener('click', () => {\n                scrollContainer.scrollBy({\n                    left: -scrollStep,\n                    behavior: 'smooth'\n                });\n            });\n\n            nextButton.addEventListener('click', () => {\n                scrollContainer.scrollBy({\n                    left: scrollStep,\n                    behavior: 'smooth'\n                });\n            });\n\n            scrollContainer.addEventListener('scroll', updateButtonStatus);\n\n            \/\/ Initial button status update\n            updateButtonStatus();\n\n            \/\/ ** NAV CONTROLLER ** \/\/\n\n            const parentNav_ = jQuery('#navigation .parent-nav'); \/\/ Elemen container scrollable\n            const prevButton_ = jQuery('#navigation .prev-nav'); \/\/ Tombol prev\n            const nextButton_ = jQuery('#navigation .next-nav'); \/\/ Tombol next\n\n            const scrollStep = 100; \/\/ Jarak scroll dalam piksel\n\n            \/\/ Fungsi untuk mengatur status tombol\n            function updateButtonStatus_() {\n                const scrollLeft = parentNav_.scrollLeft(); \/\/ Posisi scroll kiri\n                const scrollWidth = parentNav_[0].scrollWidth; \/\/ Lebar total konten\n                const clientWidth = parentNav_[0].clientWidth; \/\/ Lebar tampilan yang terlihat\n\n                \/\/ Nonaktifkan tombol Prev jika sudah di awal\n                if (scrollLeft <= 0) {\n                    prevButton_.prop('disabled', true);\n                } else {\n                    prevButton_.prop('disabled', false);\n                }\n\n                \/\/ Nonaktifkan tombol Next jika sudah di akhir\n                if (scrollLeft + clientWidth >= scrollWidth) {\n                    nextButton_.prop('disabled', true);\n                } else {\n                    nextButton_.prop('disabled', false);\n                }\n            }\n\n            \/\/ Fungsi untuk scroll ke kiri\n            function scrollLeft() {\n                parentNav_.animate({\n                    scrollLeft: '-=' + scrollStep, \/\/ Scroll ke kiri\n                }, 300, updateButtonStatus_); \/\/ Update tombol setelah animasi selesai\n            }\n\n            \/\/ Fungsi untuk scroll ke kanan\n            function scrollRight() {\n                parentNav_.animate({\n                    scrollLeft: '+=' + scrollStep, \/\/ Scroll ke kanan\n                }, 300, updateButtonStatus_); \/\/ Update tombol setelah animasi selesai\n            }\n\n            \/\/ Event listener untuk tombol prev\n            prevButton_.on('click', function () {\n                scrollLeft();\n            });\n\n            \/\/ Event listener untuk tombol next\n            nextButton_.on('click', function () {\n                scrollRight();\n            });\n\n            \/\/ Update status tombol saat scroll terjadi\n            parentNav_.on('scroll', updateButtonStatus_);\n\n            \/\/** SET TOP OF #navigation **\/\n            const $navigation = jQuery('#navigation');\n            const topWrap = jQuery('#top-wrap');\n\n            function setTopNavigation() {\n                const topWrapHeight = topWrap.outerHeight();\n                $navigation.css('top', (topWrapHeight) + 'px');\n            }\n\n            setTimeout(() => {\n                setTopNavigation();\n            }, 2000)\n        });\n    <\/script>\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":88637,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-107537","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JBL Snow Party<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/snowparty\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JBL Snow Party\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/snowparty\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-15T09:09:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/snowparty\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/snowparty\/\",\"name\":\"JBL Snow Party - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2024-12-20T08:32:54+00:00\",\"dateModified\":\"2025-01-15T09:09:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/snowparty\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/snowparty\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/snowparty\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JBL Snow Party\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JBL Snow Party","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/snowparty\/","og_locale":"en_US","og_type":"article","og_title":"JBL Snow Party","og_url":"https:\/\/jblstore.co.id\/en\/snowparty\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2025-01-15T09:09:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/snowparty\/","url":"https:\/\/jblstore.co.id\/en\/snowparty\/","name":"JBL Snow Party - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2024-12-20T08:32:54+00:00","dateModified":"2025-01-15T09:09:47+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/snowparty\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/snowparty\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/snowparty\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"JBL Snow Party"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/107537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/88637"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=107537"}],"version-history":[{"count":4,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/107537\/revisions"}],"predecessor-version":[{"id":107541,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/107537\/revisions\/107541"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=107537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}