runOnAppLoaded(function(){
    const id = "#swiper-vogue-index-banner-0banner_a4i9b5b0";
    const swiperEl = document.querySelector(id+' .vogue-swiper');

    const count = parseInt(swiperEl.getAttribute('data-count'))||0;
    const interval = parseInt(swiperEl.getAttribute('data-interval'))||0;
    let autoplay = swiperEl.getAttribute('data-autoplay') == '0' ? false : true;

    if (autoplay) {
        if (count <= 1) {
            autoplay = false
        }
        if (interval === 0) {
            autoplay = false
        }
    }

    const swiper = new window.AwesomeSwiper.Swiper(id + ' .swiper-container', {
        loop: count>1,
        effect: 'fade',
        fadeEffect:{
            crossFade: true,
        },
        autoHeight: true,
        autoplay: autoplay ? {
            delay: interval * 1000,
            disableOnInteraction: false,
        } : false,
        navigation: {
            nextEl: '.vogue-button-next',
            prevEl: '.vogue-button-prev',
        },
        on: {
            transitionStart() {
                const activeSlide = swiperEl.querySelectorAll('.swiper-slide')[this.activeIndex];
                const isFlash = activeSlide && activeSlide.getAttribute('isFlash');
                if (isFlash === 'false') {
                    swiperEl.querySelectorAll('.swiper-slide-active img').forEach(e=>e.classList.add('innerBox'));
                }
                const vogueBannerText = document.querySelector(id+' #vogue-banner-text');
                if(vogueBannerText){
                    const title = activeSlide && activeSlide.getAttribute('data-title');
                    const description = activeSlide && activeSlide.getAttribute('data-description');
                    const align = 'text-' + (activeSlide && activeSlide.getAttribute('data-align'));
                    const alignClass = ['text-left', 'text-center', 'text-right','text-bottom-left', 'text-top-left','text-bottom-right', 'text-top-right','text-bottom', 'text-top'];
                    if (!vogueBannerText.classList.contains(align)) {
                        vogueBannerText.classList.remove(...alignClass.filter(i => i !== align));
                        vogueBannerText.classList.add(align);
                    }
                    const h2 = vogueBannerText.querySelector('h2');
                    if(h2)h2.innerText = title;
                    const p = vogueBannerText.querySelector('p');
                    if(p)p.innerText = description;
                }
            },
            transitionEnd() {
                let prevImgs = swiperEl.querySelectorAll('.swiper-slide-prev img')
                let nextImgs = swiperEl.querySelectorAll('.swiper-slide-next img')
                prevImgs && prevImgs.forEach(e=>e.classList.remove('innerBox'))
                nextImgs && nextImgs.forEach(e=>e.classList.remove('innerBox'))
            }
        },
    })

    let imgs = swiperEl.querySelectorAll('.swiper-slide img');
    imgs && imgs.forEach(e=>e.addEventListener('load',function () {
        swiper.update()
    }))

    if (count <= 1) {
        swiperEl.querySelector('.vogue-button-prev').style.display='none';
        swiperEl.querySelector('.vogue-button-next').style.display='none';
        if (count === 1) {
            const swiperSlides = swiperEl.querySelectorAll('.swiper-slide')
            const swiperSlideFirstEle = swiperSlides && swiperSlides[0]
            const title = swiperSlideFirstEle && swiperSlideFirstEle.getAttribute && swiperSlideFirstEle.getAttribute('data-title')
            const isFlash = swiperSlideFirstEle && swiperSlideFirstEle.getAttribute && swiperSlideFirstEle.getAttribute('isFlash')
            if (isFlash === 'false') {
                swiperEl.querySelectorAll('.swiper-slide-active img').forEach(e=>e.classList.add('innerBox'))
            }
            const description = swiperSlideFirstEle && swiperSlideFirstEle.getAttribute && swiperSlideFirstEle.getAttribute('data-description')
            const align = 'text-' + (swiperSlideFirstEle && swiperSlideFirstEle.getAttribute && swiperSlideFirstEle.getAttribute('data-align'))
            const vogueBannerText =  document.querySelector(id+' #vogue-banner-text');
            if(vogueBannerText){
                const alignClass = ['text-left', 'text-center', 'text-right','text-bottom-left', 'text-top-left','text-bottom-right', 'text-top-right','text-bottom', 'text-top']
                if (!vogueBannerText.classList.contains(align)) {
                    vogueBannerText.classList.remove(...alignClass.filter(i => i !== align))
                    vogueBannerText.classList.add(align)
                }
                const h2 = vogueBannerText.querySelector('h2');
                if(h2)h2.innerText = title;
                const p = vogueBannerText.querySelector('p');
                if(p)p.innerText = description;
            }
        }

    }
})