路走的多了，坑也多。

这次案例是swiper效果，swiper官网或者通常的做法是，页面一加载就开始渲染swiper了，当然这个只需要傻傻的复制就行。

但是在滑动门Tab中的内容，还是按照之前的写法就出现问题，左右滑动效果能实现，但是slidesPerView就不行，页面撑不起来。

分析：

Tab内容在页面一开始加载是display:none，滑动门触发后再展示。所以需要在滑动门切换中再次执行swiper:

 $(".destination_box .left_menu .menu_item").hover(function(){

            // 获取点击的是第几个按钮

            var i = $(this).index();

            // 显示第i个table

            $(".destination_box .destination_content .content").eq(i).show();

            // 隐藏其他的table

            $(".destination_box .destination_content .content").eq(i).siblings(".content").hide();

            // 把原来选中的取消选中状态

            $(".destination_box .left_menu .menu_item").removeClass("current_item");

            // 切换点击的按钮的样式为选中状态

            $(this).addClass("current_item");

            var swiper1 = new Swiper('.index_section8_box', {
                slidesPerView: 3,
                spaceBetween: 15,
                loop:true,
                navigation: {
                    nextEl: '.index_section8_big_box .swiper-button-next',
                    prevEl: '.index_section8_big_box .swiper-button-prev',
                }
                                           
            });
            var swiper1 = new Swiper('.index_section66_box', {
                slidesPerView: 3,
                spaceBetween: 15,
                loop:true,
                navigation: {
                    nextEl: '.index_section66_big_box .swiper-button-next',
                    prevEl: '.index_section66_big_box .swiper-button-prev',
                }
                                           
            });

        });