long item controlled for long tab items

resources/assets/js/views/common/contacts.js

@@ -37,6 +37,25 @@ const app = new Vue({
 
     mounted() {
         this.form.create_user = false;
+
+        //swiper slider for long tabs items
+        for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
+            item.id = index;
+
+            new Swiper(".swiper-tabs-container", {
+                loop: false,
+                slidesPerView: Number(item.getAttribute('data-swiper')),
+                pagination: {
+                    el: ".swiper-pagination",
+                    clickable: true
+                },
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            });
+        }
+        //swiper slider for long tabs items
     },
 
     methods:{

resources/views/components/contacts/show/content.blade.php

@@ -134,7 +134,7 @@
 
         @if (! $hideBottomRight)
         <x-show.content.right>
-            <x-tabs active="documents">
+            <x-tabs id="" slides="3" active="documents">
                 <x-slot name="navs">
                     @stack('documents_nav_start')
 
@@ -146,6 +146,34 @@
 
                     @stack('transactions_nav_start')
 
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
+                    <x-tabs.nav
+                        id="transactions"
+                        name="{{ trans_choice('general.transactions', 2) }}"
+                    />
                     <x-tabs.nav
                         id="transactions"
                         name="{{ trans_choice('general.transactions', 2) }}"

resources/views/components/tabs/index.blade.php

@@ -1,10 +1,28 @@
-@props(['active'])
+@props(['active', 'id'])
 
-<div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+@php
-    <div>
+    if (! empty($attributes['slides'])) {
-        <ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
+        $slides = $attributes['slides'];
+    }
+
+    if (empty($attributes['slides'])) {
+        $slides = '2';
+    }
+@endphp
+
+<div id="{{ $id }}" data-swiper="{{ $slides }}" class="swiper" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
+    <div class="swiper-tabs-container">
+        <ul class="swiper-wrapper" {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
             {!! $navs !!}
         </ul>
+
+        <div class="swiper-button-next top-3 right-0">
+            <span class="material-icons">chevron_right</span>
+        </div>
+
+        <div class="swiper-button-prev top-3 left-0">
+            <span class="material-icons">chevron_left</span>
+        </div>
     </div>
 
     {!! $content !!}

resources/views/components/tabs/nav-link.blade.php

@@ -1,7 +1,7 @@
 @props(['id', 'name', 'href', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"

resources/views/components/tabs/nav.blade.php

@@ -1,7 +1,7 @@
 @props(['id', 'name', 'active'])
 
 <li 
-    class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
+    class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
     id="tab-{{ $id }}"
     data-id="tab-{{ $id }}"
     data-tabs="{{ $id }}"