带循环的轮播组件

Question

美好的一天，

当我尝试在 Laravel 应用程序中使用 Bootstrap 轮播组件并在循环中显示不同的 post 时，有人可以提供建议吗？来自不同 post 的图像显示正确，但所有 post 上的导航链接仅触发第一个 post 上的幻灯片，而所有其他 post 上的图像】不动。请在下面找到代码：

 @if(count($properties) > 0)
    @foreach($properties as $property)     

        <div class="col-lg-3 float-left" style="width: 220px;padding: 0px;padding-right: 0px;height: 275px;margin-left: 35px;margin-top: 10px;margin-bottom: 10px;">
            <div class="carousel slide" id="carousel-1">
                <div class="carousel-inner" role="listbox">

                    <div class="carousel-item active"><img class="img-fluid w-100 d-block" src="/storage/cover_images/{{$property->cover_image}}" alt="Slide Image" style="height: 175px;"></div>
                    <div class="carousel-item"><img class="w-100 d-block" src="storage/cover_images/{{$property->image2}}" alt="Slide Image" style="height: 175px;"></div>
                    <div class="carousel-item"><img class="w-100 d-block" src="storage/cover_images/{{$property->image3}}" alt="Slide Image" style="height: 175px;"></div>
                    <div class="carousel-item"><img class="w-100 d-block" src="storage/cover_images/{{$property->image4}}" alt="Slide Image" style="height: 175px;"></div>
                    <div class="carousel-item"><img class="w-100 d-block" src="storage/cover_images/{{$property->image5}}" alt="Slide Image" style="height: 175px;"></div>
                </div>

                <div>
                    <!-- Start: Previous --><a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a>
                    <!-- End: Previous -->
                    <!-- Start: Next --><a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next"><span class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a>
                    <!-- End: Next -->
                </div>

Answer 1

href属性决定按钮指向哪张幻灯片，目前都是指向#carousel-1

您需要将div id 中的id = "carousel-1" 更改为id="carousel-{{$i}}" 为当前属性的索引，您可以通过@foreach ($properties as $i=>$property) 实现。

下一步是相应地更改 <a> 标签在 <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a> 的 href 属性。

带循环的轮播组件

Carousel component with loops

carousel

laravel

bootstrap-4