initial commit
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
<!-- Main Slider Section Starts -->
|
||||
<div id="demo" class="carousel slide" data-bs-ride="carousel">
|
||||
<!-- Indicators/dots -->
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
|
||||
</div>
|
||||
<!-- The slideshow/carousel -->
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="http://via.placeholder.com/1200x580" class="d-block" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Slider Section Ends -->
|
||||
@@ -0,0 +1,99 @@
|
||||
<style>
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: #E23134;
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: #E23134;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.pagination .active .page-link {
|
||||
background-color: #E23134;
|
||||
color: #fff;
|
||||
border-color: #E23134;
|
||||
}
|
||||
|
||||
.page-item:first-child .page-link,
|
||||
.page-item:last-child .page-link {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@if (is_object($data) && $data->hasPages())
|
||||
<ul class="pagination">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($data->onFirstPage())
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">«</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $data->previousPageUrl() }}" rel="prev">«</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($data->links()->elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">{{ $element }}</span>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{-- Array of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $data->currentPage())
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">{{ $page }}</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $url }}">{{ $page }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($data->hasMorePages())
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ $data->nextPageUrl() }}" rel="next">»</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="page-item disabled" aria-disabled="true">
|
||||
<span class="page-link">»</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
@endif
|
||||
Reference in New Issue
Block a user