Laravel中如何用foreach实现动态轮播？单图显示问题求助

核心问题分析及修复步骤 #

1. 所有轮播项同时激活导致重叠 #

当前循环中每个轮播项都添加了is-active类，这会让所有轮播图同时显示并重叠，视觉上只呈现最后一张。

修复代码（home.blade.php）：

<div class="slides"> 
    @foreach($hot_news as $item)
        <!-- 仅第一个轮播项添加is-active类 -->
        <div class="slide {{ $loop->first ? 'is-active' : '' }}">  
            <div class="slide-content">
                <div class="caption">
                    <div class="title">{{ $item['title'] }}</div>
                    <div class="text">
                        <p>Slide description {{ $loop->index + 1 }}</p>
                    </div> 
                    <a href="#" class="btn">
                        <span class="btn-inner">Learn More</span>
                    </a>
                </div>
            </div>
            <div class="image-container"> 
                <img src="{{ asset('post') }}/{{ $item['main_image'] }}" alt="" class="image" />
            </div>
        </div>
    @endforeach
</div>

2. 分页按钮未动态生成 #

当前分页仅固定一个按钮，轮播脚本可能依赖分页按钮数量识别轮播项总数，导致无法切换。

修复代码（home.blade.php分页部分）：

<div class="pagination">
    @foreach($hot_news as $index => $item)
        <div class="item {{ $loop->first ? 'is-active' : '' }}"> 
            <span class="icon">{{ $index + 1 }}</span>
        </div>
    @endforeach
</div>

3. 脚本加载顺序错误+版本冲突 #

• 重复加载jQuery（2.1.4和3.1.1）导致冲突
• 轮播脚本依赖jQuery但加载顺序颠倒
• 轮播脚本路径错误（放在css文件夹而非js文件夹）

修复代码（bottom.blade.php脚本部分）：

<!-- jquery Core-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<!-- Bootstrap -->
<script src="{{ asset('front/js/bootstrap.min.js') }} "></script>

<!-- slide show -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<!-- 修正脚本路径到js文件夹 -->
<script src="{{ asset('front/js/slide_script.js') }} "></script>

<!-- Theme Menu -->
<script src=" {{ asset('front/js/mobile-menu.js') }} "></script>

<!-- Theme Script -->
<script src="{{ asset('front/js/script.js') }}"></script>

额外检查项 #

• 确认$hot_news变量包含多条数据：可在视图中临时添加{{ dd($hot_news) }}查看数据结构
• 检查图片路径是否有效：打开浏览器控制台，查看图片是否返回404错误
• 验证slide_script.js逻辑：确保脚本能正确识别.slide类和分页按钮，绑定切换事件

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