problem to make dynamic a slider on laravel framework - php

Question

I want to make a slider dynamic in the Php Laravel framework. there is 4 image that is sliding, title and description are fixed on each sliding...
View:-
<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">
Contact US
</div>
</div>
</div>
#endforeach
`
Controller:-
public function index(){
$sliders=home1::all();
return view('User.userdashboard',compact('sliders'));
}`
Route:-
Route::get('/',['as'=>'construction','uses'=>'User\UserController#index']);
Actual Design of slider:-
<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">
Contact US
</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>
`
I don't understand where to start the foreach loop so that only images are slide
when I add another data from admin panel with column 'image','title', 'description'
the images are showing perfectly but title and description are overwrite
please help me in sorting out this problem

Answer 1

actually in your controller you get a collection under $sliders variable. $sliders=home1::all();.
You said that your home1 Model have some columns like 'image', 'title', 'description'.
So in your blade file you are getting $sliders because the compact('slides') instruction.
In that way your should be able to loop through $slidersjust like as you are referencing in your question:
#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">
Contact US
</div>
</div>
</div>
#endforeach
Here $slider contains each object from $sliders collection so you should see its own title and description alongside the image field.
You could test what $sliderscontains by dumping the collection in your blade file, using {{ dd($sliders) }}.
Regards.