portal swiper slider control

This commit is contained in:
Burak Civan 2022-11-02 11:28:25 +03:00
parent ec032ce8c6
commit b0eb841047
5 changed files with 59 additions and 62 deletions

8
public/css/app.css vendored
View File

@ -50876,6 +50876,10 @@ body{
width: 8.333333%; width: 8.333333%;
} }
.lg\:w-auto{
width: auto;
}
.lg\:w-3\/12{ .lg\:w-3\/12{
width: 25%; width: 25%;
} }
@ -50940,10 +50944,6 @@ body{
width: 1rem; width: 1rem;
} }
.lg\:w-auto{
width: auto;
}
.lg\:w-2\/4{ .lg\:w-2\/4{
width: 50%; width: 50%;
} }

View File

@ -67,9 +67,36 @@ const app = new Vue({
this.form.password = ''; this.form.password = '';
} }
if (document.querySelector('[data-tabs-swiper]').childElementCount) {
document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
item.classList.add('swiper-slide');
});
document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
let html = `
<div class="swiper-wrapper">
${document.querySelector('[data-tabs-swiper]').innerHTML}
</div>
<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>
`;
document.querySelector('[data-tabs-swiper]').innerHTML = html;
}
new Swiper(".swiper-links", { new Swiper(".swiper-links", {
loop: false, loop: false,
slidesPerView: 3, slidesPerView: 1,
pagination: { pagination: {
el: ".swiper-pagination", el: ".swiper-pagination",
clickable: true clickable: true

View File

@ -28,16 +28,15 @@
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <x-slot name="navs">
<div class="swiper swiper-links w-full"> <div data-tabs-swiper class="w-full flex">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name) @foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start') @stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide"> <div data-tabs-slide>
<x-tabs.nav <x-tabs.nav
id="{{ $name }}" id="{{ $name }}"
@click="onChangePaymentMethodSigned('{{ $key }}')" @click="onChangePaymentMethodSigned('{{ $key }}')"
> >
<div class="w-24 truncate"> <div>
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> </x-tabs.nav>
@ -47,15 +46,6 @@
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div> </div>
<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>
</x-slot> </x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp

View File

@ -26,16 +26,15 @@
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <x-slot name="navs">
<div class="swiper swiper-links w-full"> <div data-tabs-swiper class="w-full flex">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name) @foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start') @stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide"> <div data-tabs-slide>
<x-tabs.nav <x-tabs.nav
id="{{ $name }}" id="{{ $name }}"
@click="onChangePaymentMethod('{{ $key }}')" @click="onChangePaymentMethod('{{ $key }}')"
> >
<div class="w-24 truncate"> <div>
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> </x-tabs.nav>
@ -45,15 +44,6 @@
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div> </div>
<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>
</x-slot> </x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp

View File

@ -35,16 +35,15 @@
@php $is_active = true; @endphp @php $is_active = true; @endphp
<x-slot name="navs"> <x-slot name="navs">
<div class="swiper swiper-links w-full"> <div data-tabs-swiper class="w-full flex">
<div class="swiper-wrapper">
@foreach ($payment_methods as $key => $name) @foreach ($payment_methods as $key => $name)
@stack('invoice_{{ $key }}_tab_start') @stack('invoice_{{ $key }}_tab_start')
<div class="swiper-slide"> <div data-tabs-slide>
<x-tabs.nav <x-tabs.nav
id="{{ $name }}" id="{{ $name }}"
@click="onChangePaymentMethodSigned('{{ $key }}')" @click="onChangePaymentMethodSigned('{{ $key }}')"
> >
<div class="w-24 truncate"> <div>
{{ $name }} {{ $name }}
</div> </div>
</x-tabs.nav> </x-tabs.nav>
@ -54,15 +53,6 @@
@php $is_active = false; @endphp @php $is_active = false; @endphp
@endforeach @endforeach
</div> </div>
<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>
</x-slot> </x-slot>
</div> </div>
@php $is_active = true; @endphp @php $is_active = true; @endphp