html Laravel 9:不显示空的carousel(bootstrap 5)

b1zrtrql  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(1)|浏览(209)

我正在做一个laravel 9项目,我在数据库中使用了2个表:
图片:

CREATE TABLE IF NOT EXISTS `images` (
  `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `path` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `project_id` bigint(20) UNSIGNED DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `images_project_id_foreign` (`project_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

项目:

CREATE TABLE IF NOT EXISTS `projects` (
  `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,
  `description` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci ROW_FORMAT=DYNAMIC;

我试着做一个页面,在那里我为每个项目显示所有他的图像,但我有一个问题与左,右控制/图标:当我使用它们时,它们会同时切换图像,但对于每个旋转木马。
我认为这个问题来自于这样一个事实,我有没有图像corresponding项目,所以他们是空的,并显示一个空的旋转木马。有没有一种方法来不显示空的旋转木马?

<div class="col-sm-8" style="background: rgba(204, 204, 204, 0.5);padding:5%;width:100%;">
    <div class="row">
        <h3 style="text-align: center">Galeries de nos réalisations</h3>
        <br>
    </div>

    @foreach ($projects as $project)
    <div class="row">
        <!-- Carousel -->
        <div id="demo" class="carousel slide" data-bs-ride="carousel" style="width:70%;display: block; margin-left: auto; margin-right: auto;">

            <!-- The slideshow/carousel -->
            <div class="carousel-inner">
                @php($cpt = 0)
                @foreach($images as $image)
                @if ($image->project_id==$project->id)
                        @if ($cpt == 0)
                            <div class="carousel-item active">
                                <img src="<?php echo $image->path; ?>" alt="photo" class="d-block w-100"/>
                            </div>
                            @php($cpt++)
                        @else
                            <div class="carousel-item">
                                <img src="<?php echo $image->path; ?>" alt="photo" class="d-block w-100"/>
                            </div>
                            @php($cpt++)
                        @endif
                @endif
                @endforeach
            </div>
                <!-- Left and right controls/icons -->
                <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
                </button>
        </div>
    </div>

    <div class="row">
        <p><?php echo $project->description; ?></p>
    </div>

        @role('user')<!--Super-Admin-->
        <!-- Container (Contact Section) -->
<div id="contact" class="row">
    <h1 class="text-center" style="margin-top: 100px">Image Upload</h1>

    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <strong>{{$message}}</strong>
        </div>
    @endif

    <form method="POST" action="{{ route('image.store') }}" enctype="multipart/form-data">
        @csrf
        <input type="file" class="form-control" name="image" />
        <input type="hidden" id="version" name="project_id" value="{{ $project->id }}" />

        <button type="submit" class="btn btn-sm">Upload</button>
    </form>

</div>
    @endrole
    <!--Create project -->
    @endforeach
    <div class="row">
        <form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
            @csrf
            <label for="desc">Description:</label>
            <input type="text" id="desc" name="description"><br><br>

            <button type="submit" class="btn btn-sm">Upload</button>
        </form>
    </div>
</div>

@endsection
6ojccjat

6ojccjat1#

问题解决了问题来自于carousel的id,因为foreach,每个carousel的id都是相同的。我只是通过添加id项目来更改carousel和控件/图标中的id:

<div id="demo{{$project->id}}" class="carousel slide" data-bs-ride="carousel" style="width:70%;display: block; margin-left: auto; margin-right: auto;">

...

<button class="carousel-control-prev" type="button" data-bs-target="#demo{{$project->id}}" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#demo{{$project->id}}" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
                </button>

相关问题