Laravel’s Blade templating engine’s @foreach
control structure directive has $loop
variable which is available inside every @foreach loop.
The $loop
variable is a stdClass
object that provides meta information about the loop you’re currently inside. Take a look at the properties it exposes:
- index: the index of the current item in the loop; Which starts from 0
- iteration: the based index of the current item in the loop; Which starts from 1
- remaining: how many items remain in the loop; if current item is first of five, would return 2
- count: the count of items in the loop
- first: boolean; whether this is the first item in the loop
- last: boolean; whether this is the last item in the loop
- depth: integer; how many “levels” deep this loop is; returns 1 for a loop, 2 for a loop within a loop, etc.
- parent: if this loop is within another @foreach loop, returns a reference to the $loop variable for the parent loop item; otherwise returns null
bootstrap 4 carousel with Laravel
We gonna use $loop
variable and its properties inside the @foreach
loop to build carousel. Below is the example script, where $photos
is collection of photos with title, image, description...etc
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> @foreach( $photos as $photo ) <li data-target="#carouselExampleIndicators" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li> @endforeach </ol> <div class="carousel-inner" role="listbox"> @foreach( $photos as $photo ) <div class="carousel-item {{ $loop->first ? 'active' : '' }}"> <img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}"> <div class="carousel-caption d-none d-md-block"> <h3>{{ $photo->title }}</h3> <p>{{ $photo->descriptoin }}</p> </div> </div> @endforeach </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.
Great!
I do have a question though.
How to upload images and store the names and paths to database?
If you could elaborate, i would really appreciate it.
thanks in advance.
Thank u very much
muito obrigado cara! ajudou muito aqui slide q to fazendo! valeu!
Im getting this problem: Cannot read property ‘offsetWidth’ of undefined.
Any ideas why is this happening?
Thanks!
thx
hii, am working on laravel 5.5, i need to do the same in it. i followed ur code. but its not working. so i need to change anything for laravel 5.5?
Can I get the whole code?