Reviews

<style>

/* =================================
CUSTOMER REVIEWS
================================= */

.customer-reviews {
max-width: 1200px;
margin: 0 auto;
padding: 45px 20px;
font-family: Arial, sans-serif;
box-sizing: border-box;
overflow: hidden;
}

/* =================================
HEADING
================================= */

.reviews-heading {
text-align: center;
margin-bottom: 30px;
}

.reviews-heading h2 {
font-size: 32px;
font-weight: 700;
margin: 0 0 8px;
color: #7B1134;
letter-spacing: -0.5px;
line-height: 1.2;
}

.heading-heart {
color: #7B1134;
font-size: 23px;
display: inline-block;
margin-right: 5px;
vertical-align: 2px;
}

.reviews-heading p {
color: #777;
font-size: 15px;
margin: 0;
}

/* =================================
CAROUSEL WRAPPER
================================= */

.reviews-wrapper {
position: relative;
width: 100%;
}

/* =================================
CAROUSEL
================================= */

.reviews-grid {
display: flex;
gap: 20px;

overflow-x: auto;
overflow-y: hidden;

scroll-snap-type: x mandatory;
scroll-behavior: smooth;

-webkit-overflow-scrolling: touch;

scrollbar-width: none;

padding: 5px 3px 15px;

cursor: grab;

touch-action: pan-x;

user-select: none;
}

.reviews-grid:active {
cursor: grabbing;
}

.reviews-grid::-webkit-scrollbar {
display: none;
}

/* =================================
REVIEW CARD
================================= */

.review-card {
flex: 0 0 calc((100% - 40px) / 3);

box-sizing: border-box;

background: #fff;

border: 1px solid #e8e8e8;

border-radius: 14px;

padding: 22px;

box-shadow: 0 4px 15px rgba(0,0,0,0.06);

scroll-snap-align: start;

scroll-snap-stop: always;

transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}

.review-card:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(0,0,0,0.09);
}

/* =================================
STARS
================================= */

.review-stars {
color: #f5b301;
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 12px;
}

/* =================================
REVIEW TEXT
================================= */

.review-text {
font-size: 15px;
line-height: 1.6;
color: #333;
margin: 0 0 18px;
min-height: 72px;
}

/* =================================
REVIEWER
================================= */

.reviewer {
display: flex;
align-items: center;
gap: 10px;

border-top: 1px solid #eee;

padding-top: 14px;
}

.reviewer-avatar {
width: 40px;
height: 40px;

min-width: 40px;

border-radius: 50%;

background: #f1f1f1;

display: flex;
align-items: center;
justify-content: center;

font-weight: 700;

font-size: 13px;

color: #555;
}

.reviewer-name {
font-size: 14px;
font-weight: 700;

color: #222;

margin: 0;
}

.verified {
font-size: 12px;
color: #168a45;
margin-top: 3px;
}

/* =================================
ARROWS
================================= */

.review-arrow {
position: absolute;

top: 50%;

transform: translateY(-50%);

width: 42px;
height: 42px;

border-radius: 50%;

border: 1px solid #ddd;

background: #fff;

box-shadow: 0 3px 12px rgba(0,0,0,0.12);

cursor: pointer;

z-index: 10;

display: flex;
align-items: center;
justify-content: center;

font-size: 21px;

color: #7B1134;

transition:
all 0.2s ease;
}

.review-arrow:hover {
transform: translateY(-50%) scale(1.06);

background: #7B1134;

color: #fff;

border-color: #7B1134;
}

.review-prev {
left: -18px;
}

.review-next {
right: -18px;
}

/* =================================
DOTS
================================= */

.review-dots {
display: flex;

justify-content: center;

gap: 7px;

margin-top: 8px;
}

.review-dot {
width: 7px;
height: 7px;

border-radius: 50%;

background: #d5d5d5;

transition: all 0.3s ease;

cursor: pointer;
}

.review-dot.active {
width: 20px;

border-radius: 10px;

background: #7B1134;
}

/* =================================
TABLET
================================= */

@media (max-width: 900px) {

.review-card {
flex: 0 0 calc((100% - 20px) / 2);
}

.review-prev {
left: -10px;
}

.review-next {
right: -10px;
}

}

/* =================================
MOBILE
================================= */

@media (max-width: 600px) {

.customer-reviews {
padding: 28px 12px 30px;
}

/* Small attractive heading */

.reviews-heading {
margin-bottom: 20px;
padding: 0 8px;
}

.reviews-heading h2 {
font-size: 21px;
line-height: 1.25;
letter-spacing: -0.3px;
margin-bottom: 5px;
color: #7B1134;
}

.heading-heart {
font-size: 17px;
margin-right: 3px;
vertical-align: 1px;
}

.reviews-heading p {
font-size: 12px;
line-height: 1.4;
color: #888;
}

/* Mobile carousel */

.reviews-grid {
gap: 14px;

padding: 4px 2px 12px;
}

/* One card at a time */

.review-card {
flex: 0 0 100%;

min-width: 100%;

padding: 18px;

border-radius: 13px;
}

.review-stars {
font-size: 17px;
margin-bottom: 10px;
}

.review-text {
font-size: 14px;
line-height: 1.55;

min-height: auto;

margin-bottom: 17px;
}

.reviewer-avatar {
width: 38px;
height: 38px;
min-width: 38px;
}

/* Finger swipe ke liye arrows hide */

.review-arrow {
display: none;
}

}

/* =================================
SMALL MOBILE
================================= */

@media (max-width: 380px) {

.reviews-heading h2 {
font-size: 19px;
}

.heading-heart {
font-size: 16px;
}

.reviews-heading p {
font-size: 11px;
}

.review-card {
padding: 16px;
}

}

/* =================================
REDUCE MOTION
================================= */

@media (prefers-reduced-motion: reduce) {

.reviews-grid {
scroll-behavior: auto;
}

.review-card {
transition: none;
}

}

</style>

<h2>
<span class="heading-heart"></span>
♥ What Our Customers Say
♥ </h2>

<p>Real feedback from our happy customers</p>

</div>

<button class="review-arrow review-prev" id="reviewPrev" aria-label="Previous review" type="button">
❮
</button>

<div class="reviews-grid" id="reviewsCarousel">

<div class="review-card">

<p class="review-text">
Bohat zabardast loafers hain. Quality honestly pictures se bhi better hai. Comfortable bhi hain.
</p>

<div>
<p class="reviewer-name">Muhammad Hamza</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Received my parcel today. Shoes ka look bohat premium hai and fitting bhi perfect hai.
</p>

<div>
<p class="reviewer-name">Usman Ali</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Office ke liye liye thay, really satisfied. All day wear ke baad bhi feet comfortable rehte hain.
</p>

<div>
<p class="reviewer-name">Ahsan Khan</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Bhai quality kamaal ki hai. Price ke according bohat achi deal mili.
</p>

<div>
<p class="reviewer-name">Bilal Ahmed</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Very classy loafers. Formal dressing ke sath bohat achay lagte hain.
</p>

<div>
<p class="reviewer-name">Saad Malik</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Size bilkul perfect aya. Material soft hai aur walking mein koi issue nahi.
</p>

<div>
<p class="reviewer-name">Ali Raza</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Honestly didn't expect this quality at this price. Bohat satisfied hoon.
</p>

<div>
<p class="reviewer-name">Hassan Shah</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Design simple but premium hai. Jeans aur shalwar kameez dono ke sath achay lagte hain.
</p>

<div>
<p class="reviewer-name">Zain Ahmed</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Parcel time pe receive hua aur packing bhi achi thi. Shoes are really comfortable.
</p>

<div>
<p class="reviewer-name">Fahad Khan</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

<div class="review-card">

<p class="review-text">
Bohat comfortable pair hai. Daily office use ke liye highly recommended.
</p>

<div>
<p class="reviewer-name">Muneeb Hassan</p>
<div class="verified">✓ Verified Purchase</div>
</div>

</div>

</div>

<button class="review-arrow review-next" id="reviewNext" aria-label="Next review" type="button">
❯
</button>

</div>

<div class="review-dots" id="reviewDots">
</div>

</section>

(function () {

const carousel =
document.getElementById("reviewsCarousel");

const prevButton =
document.getElementById("reviewPrev");

const nextButton =
document.getElementById("reviewNext");

const dotsContainer =
document.getElementById("reviewDots");

if (!carousel) return;

const cards =
carousel.querySelectorAll(".review-card");

if (!cards.length) return;

let currentIndex = 0;

let autoSlide = null;

let isDragging = false;

let startX = 0;

let startScrollLeft = 0;

/* =================================
VISIBLE CARDS
================================= */

function getVisibleCards() {

if (window.innerWidth <= 600) {
return 1;
}

if (window.innerWidth <= 900) {
return 2;
}

return 3;
}

/* =================================
MAX SLIDE
================================= */

function getMaxIndex() {

return Math.max(
0,
cards.length - getVisibleCards()
);

}

/* =================================
CREATE DOTS
================================= */

function createDots() {

dotsContainer.innerHTML = "";

const totalSlides =
getMaxIndex() + 1;

for (
let i = 0;
i < totalSlides;
i++
) {

const dot =
document.createElement("span");

dot.className =
"review-dot";

if (i === currentIndex) {
dot.classList.add("active");
}

dot.addEventListener(
"click",
function () {

stopAutoSlide();

slideTo(i);

startAutoSlide();

}
);

dotsContainer.appendChild(dot);

}

/* =================================
UPDATE DOTS
================================= */

function updateDots() {

const dots =
dotsContainer.querySelectorAll(
".review-dot"
);

dots.forEach(
function (dot, index) {

dot.classList.toggle(
"active",
index === currentIndex
);

}
);

}

/* =================================
SLIDE TO CARD
================================= */

function slideTo(index) {

const maxIndex =
getMaxIndex();

if (index > maxIndex) {
index = 0;
}

if (index < 0) {
index = maxIndex;
}

currentIndex = index;

const card =
cards[currentIndex];

if (!card) return;

carousel.scrollTo({

left: card.offsetLeft -
carousel.offsetLeft,

behavior: "smooth"

});

updateDots();

}

/* =================================
NEXT
================================= */

function nextSlide() {

slideTo(currentIndex + 1);

}

/* =================================
PREVIOUS
================================= */

function previousSlide() {

slideTo(currentIndex - 1);

}

/* =================================
AUTO SLIDE
================================= */

function startAutoSlide() {

stopAutoSlide();

autoSlide =
setInterval(
function () {

nextSlide();

},
3500
);

}

function stopAutoSlide() {

if (autoSlide) {

clearInterval(autoSlide);

autoSlide = null;

}

/* =================================
BUTTONS
================================= */

if (nextButton) {

nextButton.addEventListener(
"click",
function () {

stopAutoSlide();

nextSlide();

startAutoSlide();

}
);

}

if (prevButton) {

prevButton.addEventListener(
"click",
function () {

stopAutoSlide();

previousSlide();

startAutoSlide();

}
);

}

/* =================================
TOUCH / FINGER SWIPE
================================= */

carousel.addEventListener(
"touchstart",
function (event) {

stopAutoSlide();

startX =
event.touches[0].clientX;

},
{
passive: true
}
);

carousel.addEventListener(
"touchend",
function (event) {

const endX =
event.changedTouches[0].clientX;

const difference =
startX - endX;

if (difference > 50) {

nextSlide();

}

else if (difference < -50) {

previousSlide();

}

startAutoSlide();

},
{
passive: true
}
);

/* =================================
DESKTOP MOUSE DRAG
================================= */

carousel.addEventListener(
"mousedown",
function (event) {

isDragging = true;

startX = event.clientX;

startScrollLeft =
carousel.scrollLeft;

stopAutoSlide();

}
);

carousel.addEventListener(
"mousemove",
function (event) {

if (!isDragging) return;

const distance =
event.clientX - startX;

carousel.scrollLeft =
startScrollLeft - distance;

}
);

carousel.addEventListener(
"mouseup",
function (event) {

if (!isDragging) return;

isDragging = false;

const distance =
startX - event.clientX;

if (Math.abs(distance) > 50) {

if (distance > 0) {
nextSlide();
}
else {
previousSlide();
}

}
else {

currentIndex =
findClosestCard();

updateDots();

}

startAutoSlide();

}
);

carousel.addEventListener(
"mouseleave",
function () {

if (isDragging) {

isDragging = false;

currentIndex =
findClosestCard();

updateDots();

}

startAutoSlide();

}
);

/* =================================
FIND CLOSEST CARD
================================= */

function findClosestCard() {

let closest = 0;

let smallest =
Infinity;

cards.forEach(
function (card, index) {

const difference =
Math.abs(
card.offsetLeft -
carousel.scrollLeft
);

if (difference < smallest) {

smallest = difference;

closest = index;

}

}
);

return Math.min(
closest,
getMaxIndex()
);

}

/* =================================
MANUAL SCROLL
DOT UPDATE
================================= */

let scrollTimer;

carousel.addEventListener(
"scroll",
function () {

clearTimeout(scrollTimer);

scrollTimer =
setTimeout(
function () {

if (!isDragging) {

currentIndex =
findClosestCard();

updateDots();

}

},
100
);

},
{
passive: true
}
);

/* =================================
RESIZE
================================= */

let resizeTimer;

window.addEventListener(
"resize",
function () {

clearTimeout(resizeTimer);

resizeTimer =
setTimeout(
function () {

currentIndex =
Math.min(
currentIndex,
getMaxIndex()
);

createDots();

slideTo(currentIndex);

},
200
);

}
);

/* =================================
INITIALIZE
================================= */

createDots();

slideTo(0);

startAutoSlide();

})();

</script>
```

Search Our Site

Trending Search

Your cart is currently empty!.

Reviews