使用多个JavaScript轮播组件时首屏幻灯片无法显示的排查请求

问题分析 #

核心问题是全局CSS选择器作用范围错误导致的多轮播样式冲突：

• 原代码里.mySlides:not(:first-child) {display: none;}是全局规则，会把所有轮播中的非首屏幻灯片全部隐藏，再配合全局索引的JS逻辑，直接导致首屏幻灯片被错误隐藏；
• 直接移除该规则后，所有幻灯片失去隐藏逻辑，自然会堆叠显示。

解决方案 #

因为页面无需交互，仅需静态展示每个轮播的首屏内容，只需两步即可修复：

1. 限定CSS选择器作用范围
   把全局的隐藏规则，限定到单个轮播容器内部，确保每个轮播只隐藏自己容器内的非首屏幻灯片：

/* 替换原有的.mySlides:not(:first-child)规则 */
.carousel-container .mySlides:not(:first-child) {
  display: none;
}

2. 移除不必要的JS交互逻辑
   既然不需要轮播切换功能，直接删除控制幻灯片切换的JavaScript代码（包括showSlides、plusSlides等函数及初始化调用），只保留样式相关代码即可。

修改后效果 #

每个轮播容器的首屏幻灯片会默认正常显示，其余幻灯片被正确隐藏，既解决了首屏不显示的问题，也不会出现图片堆叠的情况。

内容的提问来源于stack exchange，提问作者dork artist