Home / Questions / 30771
Accepted
Cidius
Asked: 2020-10-31 14:45:47 +0800 CST 2020-10-31 14:45:47 +0800 CST

在集合中加载带有图像的轮播（引导程序）

  • 772

我想使用轮播在一篇文章中显示多个图像。是或是，它显示一个（主图像），并且限制为 5 张照片

轮播本身不是问题，主题是我拥有 x 图像的集合。经过反复试验，我得出的结论是我需要一个活动项目。所以我用 first() 显示第一张图像，然后它会循环遍历集合，显示其他图像。

问题是我无法让集合移动到下一个对象以开始循环。

从我读到的集合中没有 next() 或类似的东西。在这里我留下代码

<div id="mi-carousel" class="carousel slide">        

          <!-- Contenedor de los Slide -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="{{ asset('img/articulos/'.$articulo->imagenes->first()->nombre) }}" class="img-responsive" alt="" >
            </div>
                @foreach($articulo->imagenes as $imagen)                    
                    <div class="item">
                        <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                    </div>
                @endforeach
        </div>

          <!-- Controloles -->
          <a class="left carousel-control" href="#mi-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Anterior</span>
          </a>
          <a class="right carousel-control" href="#mi-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Siguiente hidden-xs hidden-sd</span>
          </a>
    </div>

就像这样，它显示了第一个图像2次

bootstrap

3 Answers

  1. Best Answer

    我向您展示了使第一张图像只出现一次的两种方法：

    集合上的 shift() 方法，它使用集合的第一个元素并将其从集合中删除：

            <div class="item active">
            <img src="{{ asset('img/articulos/'.$articulo->imagenes->shift()->nombre) }}" class="img-responsive" alt="" >
        </div>
            @foreach($articulo->imagenes as $imagen)                    
                <div class="item">
                    <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                </div>
            @endforeach

    使用某种方式确定带有“纯” php 的第一个元素以添加活动类：

                @foreach($articulo->imagenes as $index => $imagen)                    
                <div class="item @if($index == 0) active @endif">
                    <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                </div>
            @endforeach
    • 1

  2. 你好，这个解决方案是正确的，我发现它晚了，但它运行正确，没有错误。我上传了两个图像，一个控制器和滑块的外观，@foreach 具有的 $loop 变量用于找到索引并激活该字段（如果它是第一个）。

    在此处输入图像描述 在此处输入图像描述

    加载驱动程序搜索文件

    在此处输入图像描述

    • 0

  3. 你好，我从控制器解决它，首先我传递一个带有值的查询，然后我传递一个携带所有这些值的查询。

    public function index(){
    $slideruno=Slider::find(1);
    $sliders=Slider::orderBy('id','DESC')->get();
    // dd($slider);
    return view('sliders.slider',compact('sliders','slideruno'));
}

    在视图中它看起来像这样，我知道这是不正确的，但这是我迄今为止发现的唯一方法。

    <div class="carousel-item active">              
    <img class="d-block w-100" src="{{ Voyager::image( $slideruno->imagen ) }}" alt="First slide"> 
</div>

    在此处输入图像描述

    • -1