Postingan lainnya

Laravel 9 - Menampilkan 5 post di carousel

Ceritanya mau nampilan 5 baris pertama dari database sebagai carousel.

Carousel tidak muncul dan gak ada error.

Route::get('/', function () {
    return view('home', [
        'title' => "Home",
        'carousel' => Post::take(5)->get()
    ]);
});

<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($carousel as $car)
        <div class="carousel-item">
            @if($car->image)
            <img class="w-100" src="{{ asset('storage/' . $car->image) }}" alt="Image" />
            @else
            <img src="https://source.unsplash.com/random/330x186/?nature" class="w-100" alt="Image">
            @endif
            <div class="carousel-caption">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <h1 class="display-3 text-dark animated slideInDown mb-4">
                                {{ $car->title }}
                            </h1>
                            <p class="fs-5 text-body mb-5">
                                {{ $car->excerpt }}
                            </p>
                            <a href="/posts/{{ $car->slug }}" class="btn btn-primary py-3 px-5">More Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

laravel

@taraniskai13

16 Kontribusi 15 Poin

Diperbarui 1 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

<div>Ok, sekarang carousel sudah muncul, cuma tambahin beberapa baris code di bladenya.<br>Dari</div><pre>@foreach($carousel as $car) <div <em>class</em>="carousel-item"> @if($car->image)</pre><div><br>Ke</div><pre>@php $i = 1; @endphp @foreach($carousel as $car) <div <em>class</em>="carousel-item {{ $i == '1' ? 'active':'' }}"> @php $i++; @endphp @if($car->image)</pre><div><br><br>Ane masih belum tau alasannya kenapa penambahan @php bisa memunculkan caraousel.<br><br></div>

@taraniskai13

16 Kontribusi 15 Poin

Dipost 1 tahun yang lalu

Tanggapan

terima kasih sudah share solusinya

@hilmanski

<div>Mungkin alasanya karena ada kelas 'active' nya<br>untuk menampilkan carousel perlu ada class active. Di kode yang kamu kasih dipertanyaan tidak ada kelas activenya</div>

@hilmanski

2670 Kontribusi 2132 Poin

Dipost 1 tahun yang lalu