سلام دوستان
من میخوام با لاراول و بوت استرپ 4 multiple carousel درست کنم مثل این
اما من درست کردم اما حلقه foreach گیر کردم و نمیدونم با این حلقه چه کار کنم.
<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('public/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>
یه همچین چیزی https://jsfiddle.net/irankhosravi/k7wpszuy/ . ولی من میخوام با اسنفاده از حلقه foreach@
اطلاعات را از دیتابیس بگیرم و در سایت نمایش بدهد. این کد jsfiddle فقط برای html ساده است
من اطلاعات را از دیتابیس بگیرم و در carousel نمایش بدهد.
هر کاری کردم نشد در اینترنت هر چی گشتم پیدا نکردم قدردانی میشود اگر به سوال من پاسخ دهید.
سلام
برای مثال در https://jsfiddle.net/irankhosravi/k7wpszuy/ شما لازمه این تغییرات رو اعمال کنید:
<div class="container text-center my-3">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
@foreach($galleries->chunk(4) as $galleryCollection)
<div class="carousel-item row no-gutters @if ($galleryCollection == reset($galleries)) active @endif">
@foreach ($galleryCollection as $gallery)
<div class="col-3 float-left">
<img class="img-fluid" src="{{ asset('public/images/galleries/'.$gallery->image)}}">
</div>
@endforeach
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="recipeCarousel" 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="recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
سلام
برای مثال در https://jsfiddle.net/irankhosravi/k7wpszuy/ شما لازمه این تغییرات رو اعمال کنید:
<div class="container text-center my-3">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
@foreach($galleries->chunk(4) as $galleryCollection)
<div class="carousel-item row no-gutters @if ($galleryCollection == reset($galleries)) active @endif">
@foreach ($galleryCollection as $gallery)
<div class="col-3 float-left">
<img class="img-fluid" src="{{ asset('public/images/galleries/'.$gallery->image)}}">
</div>
@endforeach
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="recipeCarousel" 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="recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟