import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.esm.browser.min.js'
var menu = ['sun','allSeason','snow']
const swiper = new Swiper('.swiper',  {
    simulateTouch : false,
    slidesPerView: 1,
    spaceBetween:250,
    direction: 'horizontal',
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    pagination:{
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (`<img src='./img/${menu[index]}.png'>`) + '</span>'
        },
    },
});
const paginationBtn = document.querySelector(".swiper-pagination")
    const transitionSlideNext = () => {
        const slideActiveText = [...document.querySelectorAll(".slide-text")]
        const allseasonsBg = document.querySelector('.allseasons-bg')
        const animationText = () =>{
            const activeCounter = swiper.activeIndex;
            slideActiveText[activeCounter].classList.add('animateText');
        }
            switch(swiper.activeIndex){
                case 1 :
                    animationText()
                    slideActiveText[2].classList.remove('animateText')
                    slideActiveText[3].classList.remove('animateText')
                    allseasonsBg.style.backgroundPosition =  "left";
                    break
                case 2:
                    animationText()
                    slideActiveText[1].classList.remove('animateText')
                    slideActiveText[3].classList.remove('animateText')
                    allseasonsBg.style.backgroundPosition =  "center";
                    break
                case 3 :
                    animationText()
                    slideActiveText[1].classList.remove('animateText')
                    slideActiveText[2].classList.remove('animateText')
                    allseasonsBg.style.backgroundPosition =  "right";      
                   break
            }
        }
        window.addEventListener('load', transitionSlideNext);
        paginationBtn.addEventListener('click', transitionSlideNext);