Make bootstrap carousel dynamic in Laravel

Sun May 15 2022

Syful Islam Shakil


In this tutorial, i will show you how can you make dynamic slider in laravel.

First you need to fetch the data from database. For example -


@php
    $slider = DB::table('articles')->latest()->where('slider_status',1)
              ->where('status',1)->limit(3)->get();
@endphp

Here the main trick is {{ $loop->index }}. This will define the index number of content.


<ol class="carousel-indicators">
    @foreach($slider as $item)
        <li data-target="#myCarousel" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? ' active' : '' }}"></li>
    @endforeach
</ol>

Finally The {{ $loop->first ? ' active' : '' }} is deciding which content will have active class.

 
@foreach($slider as $item)
   <div class="item {{ $loop->first ? ' active' : '' }}">
       <a href="{{ url("YOUR_URL") ) }}">
           <img src="{{ url($item->image) }}" alt="{{ $item->title }}" style="margin: 0 auto;" />
        </a>
        <div class="carousel-caption"
             style="padding-top: 40px; position: static!important;">
           <h1><a href="{{ url("YOUR_URL") ) }}"> {{ $item->title }}</a></h1>
        </div>
   </div>
@endforeach


7192 Views

  • Laravel
  • PHP
  • Programming
  • Authenitcation
Shakil's Blog ©2017-©2024 All Rights Reserved