【问题标题】:How to import multi carousel item slider in laravel?如何在 laravel 中导入多轮播项目滑块?
【发布时间】:2020-04-02 12:19:13
【问题描述】:

如何在 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-4 carousel laravel-5.8


【解决方案1】:

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

    <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>

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-03-29
    • 1970-01-01
    • 2018-04-24
    • 1970-01-01
    • 2013-06-24
    • 1970-01-01
    • 2015-04-16
    • 2016-12-22
    相关资源
    最近更新 更多