Initial commit

resources/views/components/grid/littlescroller.blade.php

@@ -0,0 +1,145 @@
+@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 ">&#10094;
+                </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">&#10095;
+                </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