window.addEventListener('load', (event) => {

    if (typeof(document.querySelector('.swiper')) == 'undefined' || document.querySelector('.swiper') == null) return

    const swiper = new Swiper('.swiper', {

        loop: true,
        effect: 'fade',
    
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },
    
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    
        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        }
    })

    const carousels = document.querySelectorAll('.block-carousel')

    function setCarouselImgHeight(carousel){
        const carouselImg = carousel.querySelector('.swiper-slide__img')
        let carouselImgHeight = Math.floor(carousel.clientWidth / 1.5)
        //set carousel img height
        carousel.style.setProperty('--carousel-img-height', `${carouselImgHeight}px`)
    }

    carousels.forEach(carousel => {
        setCarouselImgHeight(carousel)
    })

    window.addEventListener('resize', function(){
        carousels.forEach(carousel => {
            setCarouselImgHeight(carousel)
        })
    })

})