$(document).ready(function () {


    const workMenu = ['Exposition', 'Exhibition', 'Event consulting', 'Overseas Exhibition']
    const swiperMainWork = new Swiper('.swiperMainWork', {
        // If we need pagination
        pagination: {
            el: '.swiperMainWorkPaging',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (workMenu[index]) + '</span>';
            },
        },
        effect: 'fade',
        autoplay: {
            delay: 3000,
        },
        loop: true,
        on: {
            resize: function () {
                swiperMainWork.changeDirection(getDirection());
            },
        },
    })


    const swiperAboutCli = new Swiper('.swiperAboutCli', {
        direction: getDirection(),
        autoplay: {
            delay: 0,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        resistance: false,
        allowTouchMove: false,
        speed: 5000,
        loop: true,
        slidesPerView: 3,
        spaceBetween: 20,
        breakpoints: {
            992: { // 992px ~ 
                slidesPerView: 5,
            },
            1440: { // 1440px ~ 
                slidesPerView: 7,
            },
        },
        on: {
            resize: function () {
                swiperAboutCli.changeDirection(getDirection());
            },
        },


    });



    const swiperMainProj = new Swiper('.swiperMainProj', {
        slidesPerView: 1,
        spaceBetween: 20,
        direction: getDirection(),
        loop: true,
        preventClicks: false,
        preventClicksPropagation: false,
        autoplay: {
            delay: 3000,
        },
        navigation: {
            nextEl: '.swiperMainProjNext',
            prevEl: '.swiperMainProjPrev',
        },
        breakpoints: {
            599: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            899: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
            1199: {
                slidesPerView: 4,
                spaceBetween: 20,
            },
            1440: {
                slidesPerView: 4,
                spaceBetween: 60,
            },
        },
        on: {
            resize: function () {
                swiperMainProj.changeDirection(getDirection());
            },
        },
    });




    function getDirection() {
        var windowWidth = window.innerWidth;
        var direction = window.innerWidth <= 0 ? 'vertical' : 'horizontal';


        return direction;
    }
});