In this tutorial we are going to see the Product Gallery Problem and their solution.
So first of lets see what is the problem then we will the how can solve that problem.
You can see here this is product details page and here is product image
And these are the product gallery images.
And this time every thing is looking good.
But when increase product quantity.
You can see here the product image gallery is not showing in a proper way.
So how can resolve this problem.
For avoiding this problem there is a very simple solution.
Go to the details component view file.
And in this file lets find the gallery code.
You can see here this is product gallery code.
Now doing one thing inside this div add here wire:ignore as following.


<div class=\"detail-media\">
<div class=\"product-gallery\" wire:ignore>
<ul class=\"slides\">
<li data-thumb=\"{{ asset('assets/images/products' ) }}/{{$product->image}}\">
<img src=\"{{ asset('assets/images/products') }}/{{$product->image}}\" alt=\"{{$product->name}}\" />
</li>
@php
$images = explode(\",\",$product->images);
@endphp
@foreach($images as $image)
@if($image)
<li data-thumb=\"{{ asset('assets/images/products' ) }}/{{$image}}\">
<img src=\"{{ asset('assets/images/products') }}/{{$image}}\" alt=\"{{$product->name}}\" />
</li>
@endif
@endforeach
</ul>
</div>
</div>


Now save this file and lets check again.
So switch to the browser and refresh the page.
Now increase or decrease the quantity here.
And you can so no changes in image gallery and everything is working good now.
So in this way you can resolve this issue.