Laravel Carousel 动态与轮播类别数组

Question

我的类别测试滑块在图片中以这种方式显示，即图像显示在彼此下方 enter image description here...我尝试将类别测试更改为另一个类别，但我无法修复它.. 我想问题可能是如何先显示活动图像幻灯片，然后再显示其余部分

我的视图刀片是

@foreach ($data['testSlider'] as $slide )
  <div class="carousel slide" data-ride="carousel" id="carousel-1">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
      </div>
    </div>
    <div>
      <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>
      <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>
    </div>
    <ol class="carousel-indicators">
      <li data-target="#carousel-1" data-slide-to="0" class=""></li>
      <li data-target="#carousel-1" data-slide-to="1"></li>
      <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
  </div>
@endforeach

我的滑块控制器有

use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;

public function test()
{
    $data['slider'] = Slider::all();
    $data['slidercategory'] = SliderCategory::all();
    $data['testSlider'] = Slider::with([
        'SliderCategory' => function ($attachmentQuery) {
            $attachmentQuery->where('title', 'test Slider');
        }
    ])->get();

    return view('testboot', compact('data'));
}

Answer 1

您的图片在重复，因为您为每张图片制作了整个轮播，而不是将图片添加到第一个轮播中。

<div class="carousel slide" data-ride="carousel" id="carousel-1">
  <div class="carousel-inner" role="listbox">
    @foreach ($data['testSlider'] as $slide )
      <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        <img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
      </div>
    @endforeach
  </div>
  <div>
    <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>
    <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>
  </div>
  <ol class="carousel-indicators">
    @foreach ($data['testSlider'] as $slide )
      <li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
    @endforeach
  </ol>
</div>