CODEWITHSUNDEEP
phplaravellaravel-5viewlaravel-8
saini tor
saini tor

Reputation: 233

How to display single image in slider using loop in Laravel 5.7?

I am trying to display the single image in the slider, but whenever the user will click on this then it's open a popup in data-src="multiple-images-here" where I am running the slider. But the main issue is with the single image display in for loop. It displays all the available images in the loop. Please suggest me the best solution for this.

Here is my index.blade.php file where I am trying to display the slider using this code.

<div class="container-fluid margin-gallery d-lg-block d-block position-relative">
     <div class="row">
        <div class="col-lg-12 p-0">
           <div class="demo-gallery">
              @php
              if($propertys->propertyImage!=null){
              $images =  json_decode($propertys->propertyImage->image_path, true);
              }
              else{
              $images=null;
              }
              @endphp
              <?php
              $images_prop = collect($images['property_images']);
              ?>
              <ul id="lightgallery">
              @if($images['property_images']!=null)
                 @forelse($images_prop as $img)
                 <li class="sizing-li position-relative" data-src="{{ asset($img) }}">
                    <a href="javascript:void()">
                       <img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">
                    </a>
                 </li>
                 @empty
                 @endforelse
                 @endif
              </ul>
           </div>
        </div>
     </div>
  </div>

I want to display the first image from for loop here

<img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">

Upvotes: 0

Views: 641

Answers (1)

Mansjoer
Mansjoer

Reputation: 184

You can pass ->first() function to get only 1 images, It will show you only the first item from your data in database.

Upvotes: 1

Related Questions