Skip to content

Commit d91315c

Browse files
itsemon245itsemon245
committed
fix: testimonial section
1 parent 9288fe0 commit d91315c

File tree

1 file changed

+70
-106
lines changed

1 file changed

+70
-106
lines changed

‎resources/views/frontend/pages/welcome.blade.php

+70-106
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@php
55
$productCat = \App\Models\ProductCategory::where('name', 'Standard Package (tax)')
66
->with(['productSubCategories', 'productSubCategories.products'])
7-
->first();
7+
->first();
88
99
@endphp
1010
<section class="mb-5">
@@ -64,154 +64,118 @@ class="text-capitalize nav-link {{ $key === 0 ? 'active' : '' }}" tabindex="-1">
6464
{{-- @dd($reviews) --}}
6565
<section class="mt-5 py-5" style="background: #474646;">
6666
<h3 class="text-center text-light">Testimonials</h3>
67-
<div class="scroll-wrapper">
68-
<span id="next" class="ti-arrow-circle-left custom-icon"></span>
69-
<div class="media-scroller snaps-inline">
67+
68+
<div class="swiper !px-12">
69+
<!-- Additional required wrapper -->
70+
<div class="swiper-wrapper !mb-8">
71+
<!-- Slides -->
7072
@forelse ($reviews as $item)
71-
<div class="media-elements">
72-
<img loading="lazy" src="{{ useImage($item->avatar) }}" alt="img" width="48px" height="48px"
73-
class=" rounded-circle shadow-4-strong d-block">
74-
<div>
73+
<div
74+
class="swiper-slide mb-2 bg-white rounded-md shadow-md p-3 w-[220px] sm:w-[300px] md:w-[400px] lg:w-[450px]">
75+
<div class="flex items-start gap-3">
76+
<img loading="lazy" src="{{ useImage($item->avatar) }}" alt="img" width="48px"
77+
height="48px" class=" rounded-circle shadow-4-strong d-block">
7578
<div class="mb-2">
7679
<h5 class="mb-0">{{ $item->name }}</h5>
7780
<small>{{ Carbon\Carbon::parse($item->created_at)->diffForHumans() }}</small>
7881
@if ($item->rating)
7982
<div class="rating">
8083
@foreach (range(1, 5) as $rating)
8184
@php
82-
$color = $rating > $item->rating ? 'var(--bs-gray-200)' : 'var(--bs-yellow)';
85+
$color =
86+
$rating > $item->rating ? 'var(--bs-gray-200)' : 'var(--bs-yellow)';
8387
@endphp
8488
<span class="fas fa-star" style="color: {{ $color }};"></span>
8589
@endforeach
8690
</div>
8791
@endif
8892
</div>
89-
<p class="text-muted mb-0">{{ $item->comment }}
90-
</p>
93+
</div>
94+
<div class="text-muted pl-2 text-justify">
95+
{{ $item->comment }}
9196
</div>
9297
</div>
9398
@empty
94-
<div class="text-center text-light px-5">
99+
<div class="swiper-slide text-center text-light px-5">
95100
No Reviews available
96101
</div>
97102
@endforelse
103+
...
104+
</div>
105+
<!-- If we need pagination -->
106+
<div class="swiper-pagination"></div>
107+
108+
<!-- If we need navigation buttons -->
109+
<div class="swiper-button-prev">
98110
</div>
99-
<span id="prev" class="ti-arrow-circle-right custom-icon"></span>
111+
<div class="swiper-button-next">
112+
</div>
113+
114+
<!-- If we need scrollbar -->
115+
<div class="swiper-scrollbar"></div>
100116
</div>
101117
</section>
102-
103118
@push('customCss')
119+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
104120
<style>
105-
.scroll-wrapper {
106-
display: flex;
107-
align-items: center;
108-
justify-content: center;
109-
gap: 10px;
110-
padding: 10px;
111-
}
112-
113-
114-
@media (min-width: 970px) {
115-
.scroll-wrapper {
116-
padding: 1rem 5rem
117-
}
118-
}
119-
120-
@media (min-width: 640px) {
121-
.scroll-wrapper {
122-
gap: 1rem;
123-
padding: 2rem;
124-
}
125-
}
126-
127-
.media-scroller {
128-
display: flex;
129-
overflow-x: auto;
130-
gap: 1rem;
131-
overscroll-behavior-inline: contain;
132-
scroll-behavior: smooth;
133-
}
134-
135-
.media-elements {
136-
display: flex;
137-
align-items: start;
138-
background: white;
139-
border-radius: 10px;
140-
gap: 1rem;
141-
padding: 1rem;
142-
max-width: 45ch;
143-
}
144-
145-
.media-elements .comment {
146-
width: 100px;
147-
display: inline;
148-
margin: 0;
149-
text-align: justify;
150-
}
151-
152-
.media-elements .image {
153-
max-width: 70px;
154-
}
155-
156-
@media (min-width:600px) {
157-
.media-elements .image {
158-
max-width: 120px;
159-
}
160-
161-
.media-elements .comment {
162-
width: 200px
163-
}
164-
}
165-
166-
#next,
167-
#prev {
168-
background: none;
169-
border: none;
170-
padding: 0;
171-
}
172-
173-
.custom-icon {
174-
color: var(--bs-primary);
175-
font-size: 28px;
176-
margin: 0 5px;
177-
cursor: pointer;
178-
}
179-
180-
.media-scroller::-webkit-scrollbar {
181-
appearance: none;
182-
display: none;
183-
}
184-
185-
.snaps-inline {
186-
scroll-snap-type: inline mandatory;
187-
scroll-padding-inline: 5rem;
188-
}
189-
190-
.snaps-inline>* {
191-
scroll-snap-align: start;
121+
:root {
122+
--swiper-navigation-size: 20px;
123+
--swiper-navigation-top-offset: 40%;
124+
--swiper-navigation-sides-offset: 20px;
125+
--swiper-navigation-color: var(--swiper-theme-color);
192126
}
193127
</style>
194128
@endpush
195-
129+
196130
@push('customJs')
131+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
132+
197133
<script>
134+
var swiper = new Swiper(".swiper", {
135+
slidesPerView: 1,
136+
spaceBetween: 30,
137+
freeMode: true,
138+
grabCursor: true,
139+
centeredSlides: true,
140+
pagination: {
141+
el: ".swiper-pagination",
142+
clickable: true,
143+
},
144+
navigation: {
145+
nextEl: ".swiper-button-next",
146+
prevEl: ".swiper-button-prev",
147+
},
148+
breakpoints: {
149+
640: {
150+
slidesPerView: 2,
151+
centeredSlides: false,
152+
},
153+
1024: {
154+
slidesPerView: 3,
155+
centeredSlides: false,
156+
},
157+
},
158+
});
159+
</script>
160+
{{-- <script>
198161
const container = document.querySelector('.media-scroller');
199162
const next = document.getElementById('next')
200163
const prev = document.getElementById('prev')
201-
const scrollElementWidth = parseInt($('.media-elements').css('width').split('px')[0])
202-
const scrollUnit = scrollElementWidth + 20;
164+
const scrollElementWidth = parseInt($('.media').css('width').split('px')[0])
165+
const scrollUnit = container.innerWidth();
203166
container.addEventListener('wheel', e => {
204167
e.preventDefault();
205168
container.scrollLeft += e.deltaY;
206169
})
207-
170+
208171
next.addEventListener('click', () => {
209172
container.scrollLeft -= scrollUnit;
173+
console.log(scrollUnit);
210174
})
211175
prev.addEventListener('click', () => {
212176
container.scrollLeft += scrollUnit;
213177
})
214-
</script>
178+
</script> --}}
215179
@endpush
216180
@endsection
217181

0 commit comments

Comments
 (0)