如何在 Laravel 的轮播中使用 foreach 循环？

Question

我正在尝试在 Laravel 中构建动态轮播，但遇到只显示单个图像的问题。尽管花了几个小时来寻找解决方案，但我仍然无法解决这个问题。非常感谢您对解决此问题的支持。

top.blade.php

 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> {{ $shareData['system_name'] }} </title>

    <!-- favicon -->
    <link href="{{ asset('others') }}/{{ $shareData['favicon'] }}"  rel=icon> <!--assest wata lobby-->

    <!-- web-fonts -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,500' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link href="{{ asset('front/css/bootstrap.min.css') }}" rel="stylesheet">

    <link href="{{ asset('front/fontawesome/css/all.css') }}" rel="stylesheet">
    <!-- font-awesome -->
    <link href="{{ asset('front/fonts/font-awesome/font-awesome.min.css') }}" rel="stylesheet">
    <!-- Mobile Menu Style -->
    <link href=" {{ asset('front/css/mobile-menu.css') }} " rel="stylesheet">



    <!-- slideshow -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C600%2C700%2C700italic%7COswald%3A400%2C300%7CVollkorn%3A400%2C400italic'>

<link rel="stylesheet" href="{{ asset('front/css/slide_style.css') }}">

bottom.blade.php

<!-- jquery Core-->
<script src="{{ asset('front/js/jquery-2.1.4.min.js') }}"></script>

<!-- Bootstrap -->
<script src="{{ asset('front/js/bootstrap.min.js') }} "></script>


<!-- slide show -->

<script src="{{ asset('front/css/slide_script.js') }} "></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>



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




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

home.blade.php

<main class="main-content"> 
  <section class="slideshow"> 
    <div class="slideshow-inner"> 
    @foreach($hot_news as $item)

      <div class="slides"> 
      
        <div class="slide is-active ">  
          <div class="slide-content">
            <div class="caption">
              <div class="title">{{ $item['title'] }}</div>
              <div class="text">
                <p>Slide description 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>
      <div class="pagination">
        <div class="item is-active"> 
          <span class="icon">1</span>
        </div>

   </div> 
      <div class="arrows">
        <div class="arrow prev">
          <span class="svg svg-arrow-left">
            <svg version="1.1" id="svg4-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M13,26c-0.256,0-0.512-0.098-0.707-0.293l-12-12c-0.391-0.391-0.391-1.023,0-1.414l12-12c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L2.414,13l11.293,11.293c0.391,0.391,0.391,1.023,0,1.414C13.512,25.902,13.256,26,13,26z"/> </svg>
            <span class="alt sr-only"></span>
          </span>
        </div>
        <div class="arrow next">
          <span class="svg svg-arrow-right">
            <svg version="1.1" id="svg5-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M1,0c0.256,0,0.512,0.098,0.707,0.293l12,12c0.391,0.391,0.391,1.023,0,1.414l-12,12c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414L11.586,13L0.293,1.707c-0.391-0.391-0.391-1.023,0-1.414C0.488,0.098,0.744,0,1,0z"/> </svg>
            <span class="alt sr-only"></span>
          </span> 
        </div> 
      </div> 
    </div> 
  </section> 
</main>[![enter image description here][1]][1]

Answer 1

你应该用类幻灯片的 div 包裹整个 @foreach 循环。

@foreach($hot_news as $item)
    <div class="slide is-active">
        <div class="slide-content">
            <div class="caption">
                <div class="title">{{ $item['title'] }}</div>
                <div class="text">
                    <p>Slide description 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