class index {
    constructor() {
        this.mySwiper = null;
        this.GetThreeMeals();
        footer()
    }

    async GetThreeMeals() {
        var res = await indexServe.threeMeals();
        console.log(res);
        res.forEach((v, i) => {
            $(".test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);

            $(".banner .swiper-wrapper").append(`
                <div class="swiper-slide">
                   ${v.content.map((item) => {
                return `
                        <img src="${item.img}" alt="">
                       `
            }).toString().replaceAll(",", "")}
                </div>
            `)
        });

        var self = this;
        $(".test li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            self.mySwiper.slideTo($(this).index())
        });


        this.initThreeMealsSwiper()
    }

    initThreeMealsSwiper() {
        this.mySwiper = new Swiper('.banner', {
            direction: 'horizontal', // 垂直切换选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                slideChangeTransitionEnd: function () {
                    $(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                },
            },
        })
    }
}

new index()