2017-12-26 21 views
-2

このコードを実行すると、パブリックフォルダのすべてのイメージが表示されますが、1つずつ表示します。パブリックフォルダからすべてのイメージを1つずつ表示するには

<div id="mycarousel" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     @foreach ($images as $image) 
      <img src="{{ asset('images/' . $image->getFilename()) }}"> 
     @endforeach 
</div> 
</div> 
    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

コントローラ

$images = \File::allFiles(public_path('images')); 

return view('welcome')->with('images',$images); 
+0

:https://stackoverflow.com/q/47976192/2815635 – C2486

答えて

1
@foreach ($images as $image) 
    <div class="item"> 
     <img src="{{ asset('images/' . $image->getFilename()) }}"> 
    </div> 
    @endforeach 
0

あなたは、クラス= "項目をアクティブに" 維持、foreachの内部のクラス= "項目" を配置する必要があります。

また、矢印が次の画像と前の画像を表示できるようにカルーセルインジケータがありません。あなたが同様の質問を何度も求めている

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp