在 laravel 框架上制作动态滑块的问题

Question

我想在 Php Laravel 框架中制作一个动态的滑块。有 4 张图片在滑动，标题和描述都固定在每个滑动...

查看：-

   <div id="slider" class="nivoSlider">
    @foreach($sliders as $slider)
    <div class="aaa">
        <img src="{{ asset('/uploads/')}}/{{$slider->background_image }}" data-thumb="{{ asset('/uploads/')}}/{{$slider->background_image }}" alt="" height="615px" width="1263px">
        <div class="pra">
            <h1>{{$slider->title}}</h1>
            <p>{{$slider->description}}
               </p>
            <div class="btn-1">
                <a href="{{route('contactUs')}}">Contact US</a>
            </div>
        </div>
    </div>
    @endforeach

`

控制器：-

public function index(){
        $sliders=home1::all();
 return view('User.userdashboard',compact('sliders'));

}`

路线：-

Route::get('/',['as'=>'construction','uses'=>'User\UserController@index']);

滑块的实际设计：-

<div id="slider" class="nivoSlider">
<div class="aaa">
    <img src="images/banner-1.jpg" data-thumb="images/toystory.jpg" alt="" />

</div>

    <div class="aaa">
    <img src="images/banner-2.jpg" data-thumb="images/up.jpg" alt=""/>
        <div class="pra">
            <h1>    The Best Business Support</h1>
            <p>
                Preparing your money is a daunting challenge for today's investors.</p>

            <div class="btn-1">
                <a href="contact-us.html">Contact US</a>
            </div>
        </div>
    </div>

    <div class="aaa">
    <img src="images/banner-3.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
</div>

    <div class="aaa">
    <img src="images/banner-4.jpg" data-thumb="images/nemo.jpg" alt="" />
 </div>

</div>

`

我不明白从哪里开始 foreach 循环，所以只有图像是幻灯片 当我从管理面板添加另一个数据时，列“图像”、“标题”、“描述” 图片显示完美，但标题和描述被覆盖

请帮我解决这个问题

Answer 1

实际上，在您的控制器中，您会在 $sliders 变量下获得一个集合。 $sliders=home1::all();。

您说您的home1 模型有一些列，例如'image', 'title', 'description'。 所以在你的刀片文件中你得到$sliders，因为compact('slides')指令。

这样，您应该能够像您在问题中引用的那样循环遍历$sliders：

@foreach ($sliders as $slider)
<div class="aaa">
    <img src="{{ asset('/uploads/')}}/{{$slider->background_image }}" 
    data-thumb="{{ asset('/uploads/')}}/{{$slider->background_image }}" 
    alt="" height="615px" width="1263px">
    <div class="pra">
        <h1>{{$slider->title}}</h1>
        <p>{{$slider->description}}</p>
        <div class="btn-1">
            <a href="{{route('contactUs')}}">Contact US</a>
        </div>
    </div>
</div>
@endforeach

这里$slider 包含来自$sliders 集合的每个对象，因此您应该在image 字段旁边看到它自己的title 和description。

您可以使用{{ dd($sliders) }} 将集合转储到刀片文件中来测试$sliders包含的内容。

问候。