review auto slider
Page: Homepage


Snippet Code
<!-- Customer Reviews Auto Slider -->
<style>
.reviews-section {
text-align: center;
padding: 50px 0px;
background-image: url(https://cdn.shopify.com/s/files/1/0955/5873/0040/files/dot-bg-v2.webp?v=1755518635);
background-position-x: center;
background-position-y: center;
background-color: #faf8f1 !important;
background-repeat: repeat;
font-family: sans-serif;
}
.reviews-section h2 {
font-size: 38px;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 10px;
}
.reviews-section h2 span {
background: #951528;
color: white;
padding: 0 6px;
border-radius: 6px;
}
.reviews-section p {
font-size: 16px;
color: #555;
margin-bottom: 30px;
}
.reviews-slider {
display: flex;
gap: 20px;
overflow: hidden;
position: relative;
}
.reviews-track {
display: flex;
gap: 20px;
animation: scroll 25s linear infinite;
}
.review-card {
flex: 0 0 auto;
width: 280px;
max-width: 90vw;
}
.review-card img {
width: 100%;
border-radius: 20px;
/* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); */
}
.reviews-button {
margin-top: 30px;
}
.reviews-button a {
display: inline-block;
padding: 12px 24px;
font-weight: bold;
color: #fff;
background: #951528;
border-radius: 30px;
text-decoration: none;
transition: 0.3s;
}
.reviews-button a:hover {
background: #444;
}
/* Infinite Scroll Animation */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsive */
@media(max-width:768px) {
.reviews-section h2 {
font-size: 18px;
}
.reviews-section p {
font-size: 13px;
}
.review-card {
width: 220px;
}
}
</style>
<section class="reviews-section">
<h2>Verified <span>Wins</span> from Our Customers 🏆</h2>
<p>Explore real success stories and see how our toolkit propelled their growth!</p>
<div class="reviews-slider">
<div class="reviews-track">
<!-- Review Images -->
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_116_scrollable-13.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_109_scrollable-6.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_110_scrollable-7.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_113_scrollable-10.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_114_scrollable-11.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_115_scrollable-12.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_112_scrollable-9.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_111_scrollable-8.webp?v=1755754856"
alt="Review"></div>
<!-- Duplicate for infinite loop -->
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_116_scrollable-13.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_109_scrollable-6.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_110_scrollable-7.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_113_scrollable-10.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_114_scrollable-11.webp?v=1755754857"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_115_scrollable-12.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_112_scrollable-9.webp?v=1755754856"
alt="Review"></div>
<div class="review-card"><img
src="https://cdn.shopify.com/s/files/1/0955/5873/0040/files/imgi_111_scrollable-8.webp?v=1755754856"
alt="Review"></div>
</div>
</div>
<div class="reviews-button">
<a href="#">More Reviews →</a>
</div>
</section>