我正在做一个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
1条答案
按热度按时间6ojccjat1#
问题解决了问题来自于carousel的id,因为foreach,每个carousel的id都是相同的。我只是通过添加id项目来更改carousel和控件/图标中的id: