@props(['product'=>null])
@if($product)
<div class="swiper pdpMobileSwiper">
    <div class="swiper-wrapper">
{{--        <div class="swiper-slide">Slide 1</div>--}}
{{--        <div class="swiper-slide">Slide 2</div>--}}
{{--        <div class="swiper-slide">Slide 3</div>--}}
        <div class="transition ease-out opacity-75 hover:opacity-100 swiper-slide w-22 h-22 overflow-hidden">
            {!! getImageTag($product->featuredMedia,'',[
            'loading'=>'lazy',
            'class'=> 'w-full object-fill h-full',
            'imglarge'=>getImagePath($product->featuredMedia),
            'alt'=>($product->featuredMedia->alt ??''),]) !!}
        </div>
        @foreach($product->media as $media)
            <div
               class="transition ease-out opacity-75 hover:opacity-100 swiper-slide w-22 h-22 overflow-hidden">
                {!! getImageTag($media,'',[
                'loading'=>'lazy',
                'class'=> 'w-full object-cover h-full',
                'imglarge'=>getImagePath($media),
                'alt'=>($media->alt ??''),]) !!}
            </div>
        @endforeach
    </div>

    <div class="swiper-pagination" style="width:18%!important;"></div>

</div>
@endif