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="">
                    <a href="javascript:void()">
                       <img class="img-responsive" src="" 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="" style="width:929px; height:495px;">

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/qTPCinc
via IFTTT