window.addEventListener('load', function() {
    if(document.querySelectorAll('.meet-writing-assistant-slider').length) {
        const splideMeetWriting = new Splide( '.meet-writing-assistant-slider', {
            type: 'loop',
            perPage: 5,
            perMove: 1,
            arrows: false,
            pagination: false,
            focus: 0,
            // padding: { left: '0', right: '150px' },
            gap: 24,
            breakpoints: {
                1500: {
                    perPage: 5,
                },
                1200: {
                    gap: 16,
                },
                1048: {
                    perPage: 3,
                    // padding: { left: '0', right: '100px' },
                },
                768: {
                    perPage: 2,
                    // padding: { left: '0', right: '60px' },
                },
            }
        } );

        const currNumSlide = document.querySelector( '.my-carousel-progress__count' );
        const barsplideMeetWriting = splideMeetWriting.root.querySelector( '.my-carousel-progress-bar' );
        const textBlocks = document.querySelectorAll('.meet-writing-assistant-text');
        const slideBlocks = document.querySelectorAll('.meet-writing-assistant-slider__item');
        let changeTextBlock = false;

        splideMeetWriting.on( 'mounted move', function () {
            const endSplideMeetWriting  = splideMeetWriting.Components.Controller.getEnd() + 1;
            const rateSplideMeetWriting = Math.min( ( splideMeetWriting.index + 1 ) / endSplideMeetWriting, 1 );
            const widthActiveBarElem = 100 / endSplideMeetWriting;
            if(!changeTextBlock) {
                changeTextBlock = true;
                return;
            }

            removeAllActive();
            showActiveTextBlock(splideMeetWriting.index);

            removeNoActiveClassItem();

            let activeElemNumText = (splideMeetWriting.index + 1);
            if(activeElemNumText < 9) {
                activeElemNumText = '0' + (splideMeetWriting.index + 1);
            }

            currNumSlide.innerHTML = activeElemNumText;
            changeTextBlock = true;
            // console.log(String( 100 * rateSplideMeetWriting ) + '%')
            barsplideMeetWriting.style.width = widthActiveBarElem + '%';
            barsplideMeetWriting.style.left = String( 100 * rateSplideMeetWriting - widthActiveBarElem) + '%';
        } );

        function removeNoActiveClassItem() {
            slideBlocks.forEach(function (slideBlock) {
                slideBlock.classList.remove('--no-active');
            });
        }

        function removeAllActive() {
            textBlocks.forEach(function (textBlock) {
                textBlock.classList.remove('--active');
            });
        }

        function showActiveTextBlock(activeElemNum) {
            if(!document.querySelectorAll(`.meet-writing-assistant-text[data-text-slide="${activeElemNum}"]`).length) return;

            const activeElem = document.querySelector(`.meet-writing-assistant-text[data-text-slide="${activeElemNum}"]`);
            activeElem.classList.add('--active');
        }

        splideMeetWriting.mount();

        splideMeetWriting.on('click touchend', slide => {
            splideMeetWriting.go(slide.index);
        });
    }

    // if(document.querySelectorAll('.track-user-activity-slider').length) {
    //     const splideTrackUserActivity = new Splide( '.track-user-activity-slider', {
    //         // type: 'loop',
    //         type: 'slide',
    //         perPage: 1,
    //         perMove: 1,
    //         arrows: false,
    //         pagination: false,
    //         direction: 'ttb',
    //         // heightRatio : 700px,
    //         height: 560,
    //         // wheel: true,
    //         focus: 0,
    //         gap: 24,
    //         breakpoints: {
    //             1400: {
    //                 height: 480,
    //             },
    //             1024: {
    //                 direction: 'ltr',
    //                 height: '100%',
    //             },
    //             768: {
    //             },
    //             540: {
    //
    //             }
    //         }
    //     } );
    //
    //     // const barSplideTrackUserActivity = document.querySelector( '.track-user-activity__progress-bar' );
    //     // splideTrackUserActivity.on( 'mounted move', function () {
    //     //     const endSplideTrackUserActivity  = splideTrackUserActivity.Components.Controller.getEnd() + 1;
    //     //     const rateSplideTrackUserActivity = Math.min( ( splideTrackUserActivity.index + 1 ) / endSplideTrackUserActivity, 1 );
    //     //     barSplideTrackUserActivity.style.height = String( 100 * rateSplideTrackUserActivity ) + '%';
    //     // } );
    //     //
    //     splideTrackUserActivity.mount();
    // }

    if(document.querySelectorAll('.reviews-slider').length) {
        const splideReviewSlider = new Splide( '.reviews-slider', {
            type: 'loop',
            perPage: 1,
            perMove: 1,
            pagination: false,
            focus: 0,
            gap: 24,
            breakpoints: {
            }
        } );

        const ActiveSlideSplideReviewSliders = document.querySelectorAll( '.reviews-slider__count--active-slide' );
        splideReviewSlider.on( 'mounted move', function () {
            const indexSplideReviewSlider  = splideReviewSlider.index + 1;
            ActiveSlideSplideReviewSliders.forEach(function (currentActiveSlide) {
                currentActiveSlide.innerHTML = indexSplideReviewSlider;
            });
        } );

        splideReviewSlider.mount();
    }

    if(document.querySelectorAll('.latest-articles-splide').length) {
        const splideLatestArticles = new Splide( '.latest-articles-splide', {
            type   : 'loop',
            perPage    : 3,
            arrows: true,
            pagination: false,
            gap: 16,
            breakpoints: {
                1023: {
                    perPage: 2,
                },
                768: {
                    perPage: 1,
                },
                540: {
                    perPage: 1,
                }
            }
        } );

        splideLatestArticles.mount();
    }

    if (document.querySelectorAll('.try-slider').length) {
        const trySlider = new Splide('.try-slider', {
            type: 'loop',
            perPage: 3,
            perMove: 1,
            start: 1,
            arrows: false,
            pagination: false,
            flickPower: 50,
            flickMaxPages: 1,
            autoplay: true,
            interval: 8000,
            breakpoints: {
                1920: { perPage: 2, padding: { left: '200px', right: '' } },
                1601: { padding: { left: '60px', right: '' } },
                1441: { padding: { left: '50px', right: '' } },
                1025: { padding: { left: '40px', right: '' } },
                1023: { perPage: 2 },
                768: { perPage: 2, padding: { left: '30px', right: '' } },
                767: {
                    perPage: 1,
                    padding: { left: '45px', right: '45px' }
                }
            }
        });

        trySlider.mount();

        const paginationContainer = document.createElement('div');
        paginationContainer.classList.add('custom-splide-pagination', 'jc-c');

        Array.from({ length: trySlider.length }).forEach((_, i) => {
            const dot = document.createElement('button');
            dot.classList.add('custom-dot');
            dot.dataset.index = i;
            dot.addEventListener('click', () => trySlider.go(i));
            paginationContainer.appendChild(dot);
        });

        document.querySelector('.try-slider').after(paginationContainer);

        function alignTitle(paddingLeft) {
            const container = document.querySelector('.try-main-h1__container');
            container.classList.add('container--fluid');
            container.style.paddingLeft = `${paddingLeft}px`;
        }

        function removeAlignTitle() {
            const container = document.querySelector('.try-main-h1__container');
            container.classList.remove('container--fluid');
            container.style.paddingLeft = `revert-layer`;
        }

        function alignPagination() {
            const slideWidth = document.querySelector('.splide__slide')?.offsetWidth || 0;
            const windowWidth = window.innerWidth;
            const paddingMap = [
                { max: 1024, value: 0 },
                { max: 1441, value: 50 },
                { max: 1601, value: 60 },
                { max: 1920, value: 200 }
            ];

            if (windowWidth <= 1921 && windowWidth > 1025) {
                const paddingLeft = paddingMap.find(p => windowWidth <= p.max)?.value || 0;
                const paginationWidth = paginationContainer.offsetWidth || 0;
                const paddingOffset = 16;

                paginationContainer.classList.remove('jc-c');
                paginationContainer.style.marginLeft = `${paddingLeft + slideWidth / 2 - paddingOffset * 2}px`;
               
                alignTitle(paddingLeft + paddingOffset);
            } else {
                paginationContainer.classList.add('jc-c');
                paginationContainer.style.marginLeft = `0px`;

                removeAlignTitle();
            }
        }

        function throttle(func, limit) {
            let lastFunc;
            let lastRan;
            return function () {
                const context = this, args = arguments;
                if (!lastRan) {
                    func.apply(context, args);
                    lastRan = Date.now();
                } else {
                    clearTimeout(lastFunc);
                    lastFunc = setTimeout(function () {
                        if ((Date.now() - lastRan) >= limit) {
                            func.apply(context, args);
                            lastRan = Date.now();
                        }
                    }, limit - (Date.now() - lastRan));
                }
            };
        }

        const throttledResize = throttle(alignPagination, 200);
        window.addEventListener('resize', throttledResize);

        alignPagination();

        trySlider.on('moved', () => {
            const activeIndex = trySlider.index % trySlider.length;
            document.querySelectorAll('.custom-dot').forEach((dot, index) => {
                dot.classList.toggle('is-active', index === activeIndex);
            });

            updateFormData(true);
        });

        document.querySelectorAll('.custom-dot')[trySlider.index]?.classList.add('is-active');

        function updateFormData (setCurrentField) {
            const initCardNameField = document.querySelector('input[name="try-form-init-name"]');
            const currentCardNameField = document.querySelector('input[name="try-form-current-name"]');
            const currentSlideSelector = document.querySelector('.try-slider .is-active.is-visible');
            const slideName = currentSlideSelector.getAttribute('data-slide-name');

            if(initCardNameField.value === "") initCardNameField.value = slideName;
            if(setCurrentField) currentCardNameField.value = slideName;
        }

        updateFormData();

        trySlider.on('click touchend', slide => {
            trySlider.go(slide.index);
        });
    }

})

• [D] libs
• [F] rellax.js
  Delete
• [F] slider.js
  Delete
• [F] try.js
  Delete