Компонент карусели с петлями - PullRequest
Новая
       107

Компонент карусели с петлями

0 голосов
/ 26 мая 2020

Добрый день,

Может кто-нибудь посоветовать, поскольку я пытаюсь использовать компонент Bootstrap Carousel вместе с отображением различных сообщений в al oop, в приложении 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>

1 Ответ

0 голосов
/ 26 мая 2020

Атрибут href определяет, на какой слайд будет указывать кнопка, и в настоящее время все указывает на #carousel-1

Вам нужно изменить id = "carousel-1" на id="carousel-{{$i}}" в вашем div id на индекс текущего свойства, которое вы можете получить с помощью @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> соответственно.

...