Files
sifatbaho-php/resources/views/pages/advance-ui-swiper.blade.php
2026-04-05 05:31:24 +05:00

535 lines
32 KiB
PHP
Executable File

@extends('layouts.master')
@section('title') @lang('translation.swiper-slider') @endsection
@section('css')
<link href="{{ URL::asset('assets/libs/swiper/swiper.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Advance UI @endslot
@slot('title') Swiper Slider @endslot
@endcomponent
<div class="row">
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Default Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>default-swiper</code> class to set a default swiper.</p>
<!-- Swiper -->
<div class="swiper default-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-1.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-2.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-3.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Navigation & Pagination Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>navigation-swiper</code> class to set a swiper with navigation and pagination.</p>
<!-- Swiper -->
<div class="swiper navigation-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-4.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-5.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-6.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Pagination Dynamic Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>pagination-dynamic-swiper</code> class to set a dynamic swiper with pagination.</p>
<!-- Swiper -->
<div class="swiper pagination-dynamic-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-7.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-8.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-9.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination dynamic-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Pagination Fraction Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>pagination-fraction-swiper</code> class to set a fraction swiper with pagination.</p>
<!-- Swiper -->
<div class="swiper pagination-fraction-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-10.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-11.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-12.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Pagination Custom Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>pagination-custom-swiper</code> class to set a swiper with custom pagination.</p>
<!-- Swiper -->
<div class="swiper pagination-custom-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-2.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-3.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-4.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination pagination-custom"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Pagination Progress Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>pagination-progress-swiper</code> class to set a swiper with progress pagination.</p>
<!-- Swiper -->
<div class="swiper pagination-progress-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-5.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-6.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-7.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Scrollbar Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>pagination-scrollbar-swiper</code> class to set a swiper with scrollbar pagination.</p>
<!-- Swiper -->
<div class="swiper pagination-scrollbar-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-8.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-9.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-10.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-scrollbar"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Vertical Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>vertical-swiper</code> class to set a vertical swiper.</p>
<!-- Swiper -->
<div class="swiper vertical-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-11.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-12.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-1.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Mousewheel Control Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>mousewheel-control-swiper</code> class to set a swiper with mousewheel scroll.</p>
<!-- Swiper -->
<div class="swiper mousewheel-control-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-3.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-4.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-5.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Effect Fade Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>effect-fade-swiper</code> class to set a swiper with fade effect.</p>
<!-- Swiper -->
<div class="swiper effect-fade-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-6.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-7.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-8.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Effect Creative Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>effect-creative-swiper</code> class to set a swiper with creative custom effect.</p>
<!-- Swiper -->
<div class="swiper effect-creative-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-9.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-10.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-11.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Effect Flip Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>effect-flip-swiper</code> class to set a swiper with flip effect.</p>
<!-- Swiper -->
<div class="swiper effect-flip-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-12.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-1.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-2.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Effect Coverflow Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>effect-coverflow-swiper</code> class to set a swiper with coverflow effect.</p>
<!-- Swiper -->
<div class="swiper effect-coverflow-swiper rounded pb-5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-4.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-5.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-6.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-7.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-8.jpg') }}" alt="" class="img-fluid" />
</div>
<div class="swiper-slide">
<img src="{{ URL::asset('assets/images/small/img-9.jpg') }}" alt="" class="img-fluid" />
</div>
</div>
<div class="swiper-pagination swiper-pagination-dark"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title mb-0">Responsive Breakpoints Swiper</h4>
</div><!-- end card header -->
<div class="card-body">
<p class="text-muted">Use <code>responsive-swiper</code> class to set a responsive swiper.</p>
<!-- Swiper -->
<div class="swiper responsive-swiper rounded gallery-light pb-4">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="gallery-box card">
<div class="gallery-container">
<a class="image-popup" href="{{ URL::asset('assets/images/small/img-1.jpg') }}" title="">
<img class="gallery-img img-fluid mx-auto" src="{{ URL::asset('assets/images/small/img-1.jpg') }}" alt="" />
<div class="gallery-overlay">
<h5 class="overlay-caption">Glasses and laptop from above</h5>
</div>
</a>
</div>
<div class="box-content">
<div class="d-flex align-items-center mt-1">
<div class="flex-grow-1 text-muted">by <a href="" class="text-body text-truncate">Ron Mackie</a></div>
<div class="flex-shrink-0">
<div class="d-flex gap-3">
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-thumb-up-fill text-muted align-bottom me-1"></i> 2.2K
</button>
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-question-answer-fill text-muted align-bottom me-1"></i> 1.3K
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-box card">
<div class="gallery-container">
<a class="image-popup" href="{{ URL::asset('assets/images/small/img-2.jpg') }}" title="">
<img class="gallery-img img-fluid mx-auto" src="{{ URL::asset('assets/images/small/img-2.jpg') }}" alt="" />
<div class="gallery-overlay">
<h5 class="overlay-caption">Working at a coffee shop</h5>
</div>
</a>
</div>
<div class="box-content">
<div class="d-flex align-items-center mt-1">
<div class="flex-grow-1 text-muted">by <a href="" class="text-body text-truncate">Nancy Martino</a></div>
<div class="flex-shrink-0">
<div class="d-flex gap-3">
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-thumb-up-fill text-muted align-bottom me-1"></i> 3.2K
</button>
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-question-answer-fill text-muted align-bottom me-1"></i> 1.1K
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-box card mb-0">
<div class="gallery-container">
<a class="image-popup" href="{{ URL::asset('assets/images/small/img-10.jpg') }}" title="">
<img class="gallery-img img-fluid mx-auto" src="{{ URL::asset('assets/images/small/img-10.jpg') }}" alt="">
<div class="gallery-overlay">
<h5 class="overlay-caption">Fun day at the Hill Station</h5>
</div>
</a>
</div>
<div class="box-content">
<div class="d-flex align-items-center mt-1">
<div class="flex-grow-1 text-muted">by <a href="" class="text-body text-truncate">Henry Baird</a></div>
<div class="flex-shrink-0">
<div class="d-flex gap-3">
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-thumb-up-fill text-muted align-bottom me-1"></i> 632
</button>
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-question-answer-fill text-muted align-bottom me-1"></i> 95
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-box card">
<div class="gallery-container">
<a class="image-popup" href="{{ URL::asset('assets/images/small/img-4.jpg') }}" title="">
<img class="gallery-img img-fluid mx-auto" src="{{ URL::asset('assets/images/small/img-4.jpg') }}" alt="" />
<div class="gallery-overlay">
<h5 class="overlay-caption">Drawing a sketch</h5>
</div>
</a>
</div>
<div class="box-content">
<div class="d-flex align-items-center mt-1">
<div class="flex-grow-1 text-muted">by <a href="" class="text-body text-truncate">Jason McQuaid</a></div>
<div class="flex-shrink-0">
<div class="d-flex gap-3">
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-thumb-up-fill text-muted align-bottom me-1"></i> 825
</button>
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-question-answer-fill text-muted align-bottom me-1"></i> 101
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-box card">
<div class="gallery-container">
<a class="image-popup" href="{{ URL::asset('assets/images/small/img-6.jpg') }}" title="">
<img class="gallery-img img-fluid mx-auto" src="{{ URL::asset('assets/images/small/img-6.jpg') }}" alt="" />
<div class="gallery-overlay">
<h5 class="overlay-caption">Project discussion with team</h5>
</div>
</a>
</div>
<div class="box-content">
<div class="d-flex align-items-center mt-1">
<div class="flex-grow-1 text-muted">by <a href="" class="text-body text-truncate">Erica Kernan</a></div>
<div class="flex-shrink-0">
<div class="d-flex gap-3">
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-thumb-up-fill text-muted align-bottom me-1"></i> 3.4K
</button>
<button type="button" class="btn btn-sm fs-12 btn-link text-body text-decoration-none px-0">
<i class="ri-question-answer-fill text-muted align-bottom me-1"></i> 1.3k
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-dark"></div>
</div>
</div><!-- end card-body -->
</div><!-- end card -->
</div><!--end col-->
</div><!--end row-->
@endsection
@section('script')
<script src="{{ URL::asset('/assets/libs/prismjs/prismjs.min.js') }}"></script>
<script src="{{ URL::asset('/assets/libs/swiper/swiper.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/pages/swiper.init.js') }}"></script>
<script src="{{ URL::asset('assets/js/app.min.js') }}"></script>
@endsection