带循环的旋转木马组件

Question

早安，

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

 @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)实现的当前属性的索引。

下一步是相应地更改href处<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>属性。