Initial commit
This commit is contained in:
Ahrom
235
resources/views/components/grid/bigscroller.blade.php
Normal file
235
resources/views/components/grid/bigscroller.blade.php
Normal file
@@ -0,0 +1,235 @@
|
||||
@props(['blogs','scroll'=>true])
|
||||
|
||||
|
||||
@if($scroll)
|
||||
|
||||
<div class="h-full">
|
||||
|
||||
<div wire:ignore dir="ltr" x-data="slider3" class=" group swiper-container h-full">
|
||||
<div class="swiper swiper3 h-full">
|
||||
<!-- Wrapper -->
|
||||
<div class="swiper-wrapper h-full">
|
||||
<!-- Slides -->
|
||||
|
||||
@foreach($blogs as $blog)
|
||||
|
||||
<div class="swiper-slide w-1/4 h-full ">
|
||||
|
||||
<div style="transition: transform 0.5s ease-in-out;" class="flex gap-10 overflow-x-auto h-full">
|
||||
|
||||
<div class="h-full w-full rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center; ">
|
||||
|
||||
<div class="w-full h-full rounded-xl flex "
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7 justify-between ">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
|
||||
<svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="4" cx="5" cy="5.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
|
||||
<div class="text-white">
|
||||
{!! $blog->subject!!}
|
||||
{{-- {!! $blog->subject !!}--}}
|
||||
</div>
|
||||
<div>
|
||||
{{-- توضیحات--}}
|
||||
{{-- {!! $blog->preview !!}--}}
|
||||
</div>
|
||||
<div class="flex gap-5 text-white">
|
||||
|
||||
<div class="text-xs">
|
||||
{{-- تاریخ--}}
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
</div>
|
||||
|
||||
<div class="text-xs">
|
||||
{{-- زمان مطالعه--}}
|
||||
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
||||
</div>
|
||||
|
||||
{{-- <div>--}}
|
||||
{{-- {!! $blog->likes ??0 !!}--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</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 hover:backdrop-blur-sm w-12 h-12 items-center content-center rounded-full 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('slider3', () => ({
|
||||
swiper: null,
|
||||
init() {
|
||||
this.swiper = new Swiper('.swiper3', {
|
||||
loop: true, // فعالسازی حالت لوپ
|
||||
slidesPerView: 4, // تعداد اسلایدهای قابل نمایش در هر صفحه
|
||||
spaceBetween: 30, // فاصله بین اسلایدها
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
speed: 400,
|
||||
// pagination: {
|
||||
// el: '.swiper-pagination',
|
||||
// clickable: true,
|
||||
// },
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
}))
|
||||
</script>
|
||||
|
||||
@endscript
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@else
|
||||
|
||||
|
||||
<div class="w-full grid grid-cols-4 gap-5">
|
||||
@foreach($blogs as $blog)
|
||||
|
||||
<div class="flex gap-10 my-8 overflow-x-auto h-[45vh]">
|
||||
|
||||
<div class="h-full w-80 rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center; ">
|
||||
|
||||
<div class="w-full h-full rounded-xl flex "
|
||||
style="background-image: linear-gradient(180deg, transparent, black);">
|
||||
|
||||
<div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7 justify-between ">
|
||||
|
||||
<div>
|
||||
<div style="background: {{$blog->category->color}}"
|
||||
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
|
||||
<svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="4" cx="5" cy="5.5" fill="black" />
|
||||
</svg>
|
||||
{{$blog->category->title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
|
||||
|
||||
<div class="text-white">
|
||||
{!! $blog->subject!!}
|
||||
{{-- {!! $blog->subject !!}--}}
|
||||
</div>
|
||||
<div>
|
||||
{{-- توضیحات--}}
|
||||
{{-- {!! $blog->preview !!}--}}
|
||||
</div>
|
||||
<div class="flex gap-3 text-white">
|
||||
|
||||
<div class="text-xs flex flex-col justify-center">
|
||||
|
||||
با میلاد بابایی
|
||||
{{-- تاریخ--}}
|
||||
{{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
|
||||
</div>
|
||||
|
||||
<span>.</span>
|
||||
|
||||
<div class="text-xs flex flex-col justify-center">
|
||||
{{-- زمان مطالعه--}}
|
||||
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
||||
|
||||
{{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
|
||||
</div>
|
||||
|
||||
{{-- <div>--}}
|
||||
{{-- {!! $blog->likes ??0 !!}--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@endif
|
||||
Reference in New Issue
Block a user