Javascript 全屏菜单只在第一张幻灯片上工作，而不是在rest-CSS，HTML上

我正在为我的网站使用swiper slider，我遇到了在每张幻灯片上添加全屏菜单的问题

var swiper=新的swiper（“.swiper容器”{
分页：{
el:“.swiper分页”，
类型：'分数'，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
});
$（“#切换”）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'#overlay'）。toggleClass（'open'）；
});
html，
身体{
位置：相对位置；
身高：100%；
}
身体{
背景：#eee；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字体大小：14px；
颜色：#000；
保证金：0；
填充：0；
}
/*游泳运动员*/
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}
/*菜单*/
菜单a：之后{
内容：''；
位置：绝对位置；
背景:#FF5252；
高度：2倍；
宽度：0%；
转化：translateX（-50%）；
左：50%；
底部：0；
过渡：35秒轻松；
}
.container.menu a:悬停：在{
宽度：100%；
}
h1{
位置：相对位置；
文本对齐：居中；
}
.button_容器{
位置：固定；
最高：5%；
右：2%；
高度：27px；
宽度：35px；
光标：指针；
z指数：100；
过渡：不透明度。25秒缓解；
}
.button_容器：悬停{
不透明度：.7；
}
.button_容器。活动。顶部{
变换：translateY（10px）translateX（0）旋转（45度）；
背景：#FFF；
}
.button_容器。活动。中间{
不透明度：0；
背景：#FFF；
}
.button_容器。活动。底部{
变换：translateY（-10px）translateX（0）旋转（-45度）；
背景：#FFF；
}
.button_容器跨度{
背景:#FF5252；
边界：无；
高度：3倍；
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0；
过渡：全部.35秒轻松；
光标：指针；
}
.button_容器跨度：第n个类型（2）{
顶部：10px；
}
.button_容器跨度：第n个类型（3）{
顶部：20px；
}
.覆盖{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：1；
可见性：隐藏；
过渡：不透明度.35s，可见性.35s，宽度.35s；
z指数：50；
}
.覆盖：之前{
内容：''；
背景:#FF5252；
左-55%；
排名：0；
宽度：50%；
身高：100%；
位置：绝对位置；
过渡：左。35秒放松；
}
.覆盖：之后{
内容：''；
背景:#FF5252；
右图：-55%；
排名：0；
宽度：50%；
身高：100%；
位置：绝对位置；
过渡：全部.35秒轻松；
}
.打开{
不透明度：.9；
能见度：可见；
身高：100%；
}
.overlay.open:before{
左：0；
}
.覆盖。打开：之后{
右：0；
}
.李开复{
动画：fadeInRight.5s向前放松；
动画延迟：.35s；
}
.overlay.open li:n类型（2）{
动画延迟：.45秒；
}
.overlay.open li:n类型（3）{
动画延迟：.55s；
}
.overlay.open li:n类型（4）{
动画延迟：.65s；
}
.叠加导航{
位置：相对位置；
身高：70%；
最高：50%；
转化：translateY（-50%）；
字体大小：50px；
字体系列：“Vollkorn”，衬线；
字体大小：400；
文本对齐：居中；
z指数：100；
}
.ul{
列表样式：无；
填充：0；
保证金：0自动；
显示：内联块；
位置：相对位置；
身高：100%；
}
李先生{
显示：块；
身高：25%；
高度：计算（100%/4）；
最小高度：50px；
位置：相对位置；
不透明度：0；
}
李先生{
显示：块；
位置：相对位置；
颜色：#FFF；
文字装饰：无；
溢出：隐藏；
}
a:悬停：在，
a:焦点：在，
.ul li a:活动：之后{
宽度：100%；
}
a:之后{
内容：''；
位置：绝对位置；
底部：0；
左：50%；
宽度：0%；
转化：translateX（-50%）；
高度：3倍；
背景：#FFF；
过渡：.35s；
}
@关键帧淡入淡出{
0% {
不透明度：0；
左：20%；
}
100% {
不透明度：1；
左：0；
}
.navbar品牌{
颜色：白色；
字体大小：1.75rem！重要；
}
李海军{
填充：10px；
字体大小：400；
字号：1rem；
}
导航李a：悬停{
颜色：黑色；
}
导航链路{
颜色：白色；
}

幻灯片1
幻灯片2






幻灯片3






您的菜单具有
位置：固定的
，该位置相对于最近的视口进行定位。通常情况下，这是
，但也有CSS属性可以使元素充当其子元素的视口

其中一个属性是具有任何3d变换效果的
transform
。这是应用于滑块容器的属性。在这种情况下，滑块容器充当菜单的视口，所有菜单都重叠

错误的修复方法是对每张幻灯片应用3d惰性变换：
变换：rotatez（0）
。示例：


var swiper=新的swiper（“.swiper容器”{
分页：{
el:“.swiper分页”，
类型：'分数'，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
});
$（“#切换”）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'#overlay'）。toggleClass（'打开'）
  <div class="button_container" id="toggle">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
  </div>
 <div class="overlay" id="overlay0">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
      </ul>
    </nav>
  </div>
  <div class="overlay" id="overlay1">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
      </ul>
    </nav>
  </div> 
  <div class="overlay" id="overlay2">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>
        <li><a href="#">Eleven </a></li>
        <li><a href="#">Twelve</a></li>
      </ul>
    </nav>
  </div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        </div>
        <div class="swiper-slide">
            Slide 2
        </div>
        <div class="swiper-slide">
            Slide 3
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

$('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay' + swiper.activeIndex).toggleClass('open');
});

<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  //////////// added
  on: {
    slideChange: function(){
        if(this.activeIndex == 0) $("#toggle").hide();
        else $("#toggle").show();
    }
  } //////////// added


});

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay'+swiper.activeIndex).toggleClass('open');
});

$("#toggle").hide();  //////////// added
</script>