时间戳

首页 > 解决方案 > 如何在 laravel 中导入多轮播项目滑块？

bootstrap-4 - 如何在 laravel 中导入多轮播项目滑块？

问题描述

如何在 laravel 中导入多轮播项目滑块？

我试图从这个解决方案更改我的代码 PHP Laravel 中的动态轮播只显示四个图像但没有工作

     <div class="row">
            <div class="bd-example">
                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

                    <ol class="carousel-indicators">
                        @foreach($galleries as $value)
                            <li data-target="#carouselExampleCaptions" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
                        @endforeach
                    </ol>
                    <div class="carousel-inner">
                        @foreach($galleries->chunk(4) as $galleryCollection)
                            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                @foreach ($galleryCollection as $gallery)
                                    <div class="col-md-3">
                                        <img src="{{ asset('images/galleries/'.$gallery->image) }}" class="d-block w-100">
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>

标签： bootstrap-4carousellaravel-5.8

解决方案

我运行相同的代码，一切运行完美。

    <div class="row-fluid my-5">
    <div id="productSlider" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner row w-100 mx-auto">
            @foreach($products->chunk(7) as $productCollections)
                <div class="carousel-item {{ $loop->first ? 'active' : '' }}">

                    <div class="row">
                        @foreach($productCollections as $product)
                         <div class="col mx-1 my-5">
                            <img class="img-fluid" width="200" heibght="350" src="{{ asset('uploads/product/' . $product->image) }}" alt="{{ $product->name }}">
                         </div>
                        @endforeach
                    </div>

                </div>
            @endforeach
        </div>

        <a class="carousel-control-prev" href="#productSlider" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#productSlider" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

您是否检查过代码触发时是否出现任何特定错误。

推荐阅读