145 lines
4.0 KiB
PHP
145 lines
4.0 KiB
PHP
@props(['blogs','scroll'=>true])
|
|
|
|
|
|
@if($scroll)
|
|
|
|
<div>
|
|
|
|
|
|
<div wire:ignore dir="ltr" x-data="slider4" class="relative group swiper-container h-full">
|
|
<div class="swiper swiper4 h-full">
|
|
<!-- Wrapper -->
|
|
<div class="swiper-wrapper h-full">
|
|
<!-- Slides -->
|
|
|
|
@foreach($blogs as $blog)
|
|
|
|
<div class="swiper-slide flex justify-center h-max">
|
|
|
|
<div class=" flex flex-col gap-3 h-max w-full ">
|
|
|
|
<div dir="rtl" class="w-full">
|
|
{{-- :style="`height: ${width}px`" --}}
|
|
<img :style="`height: ${width}px`" @if($loop->first) id="imagee" @endif class="w-full rounded-xl"
|
|
src="{{asset('images/'.$blog->image)}}"
|
|
alt="">
|
|
</div>
|
|
|
|
<div dir="rtl" class="flex flex-col ">
|
|
<div class="text-white">
|
|
رضا کریمی
|
|
</div>
|
|
|
|
<div class="text-gray-400 text-xs">
|
|
مدیر فروش
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
{{-- <!-- Pagination -->--}}
|
|
{{-- <div class="swiper-pagination"></div>--}}
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="swiper-button-prev ">
|
|
|
|
{{-- hover:bg-[#000000b3] bg-[#00000080] --}}
|
|
<button
|
|
class="prev absolute w-12 h-12 items-center content-center rounded-full hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:left-5 -left-52 opacity-0 group-hover:opacity-100 ">❮
|
|
</button>
|
|
|
|
</div>
|
|
<div class="swiper-button-next">
|
|
|
|
{{-- hover:bg-[#000000b3] bg-[#00000080] --}}
|
|
<button
|
|
class="next absolute w-12 h-12 items-center content-center rounded-full hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:right-5 -right-52 opacity-0 group-hover:opacity-100">❯
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@script
|
|
|
|
<script>
|
|
Alpine.data('slider4', () => ({
|
|
swiper4: null,
|
|
width: ((document.getElementById('imagee').clientWidth) - 120) / 6,
|
|
init() {
|
|
this.swiper4 = new Swiper('.swiper4', {
|
|
loop: true, // فعالسازی حالت لوپ
|
|
slidesPerView: 6, // تعداد اسلایدهای قابل نمایش در هر صفحه
|
|
spaceBetween: 20, // فاصله بین اسلایدها
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
// pagination: {
|
|
// el: '.swiper-pagination',
|
|
// clickable: true,
|
|
// },
|
|
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
}))
|
|
</script>
|
|
|
|
@endscript
|
|
|
|
|
|
</div>
|
|
|
|
@else
|
|
|
|
<div class="grid grid-cols-6 items-center content-center">
|
|
|
|
@foreach($blogs as $blog)
|
|
<div class=" ">
|
|
|
|
<div dir="rtl">
|
|
<img class="size-44 rounded-xl"
|
|
src="{{asset('images/'.$blog->image)}}"
|
|
alt="">
|
|
</div>
|
|
|
|
<div dir="rtl" class="flex flex-col mt-2 ">
|
|
<div class="text-white">
|
|
رضا کریمی
|
|
</div>
|
|
|
|
<div class="text-gray-400 text-xs">
|
|
مدیر فروش
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@endif |