From 961d68ecdd7cb503889fc23e47490673d52bb5ac Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 12 May 2023 16:32:58 +0700
Subject: swiper loop slide

---
 src/lib/review/components/CustomerReviews.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/lib/review')

diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx
index 935d4a3d..5cc179e9 100644
--- a/src/lib/review/components/CustomerReviews.jsx
+++ b/src/lib/review/components/CustomerReviews.jsx
@@ -2,6 +2,7 @@ import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import Image from 'next/image'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay } from 'swiper'
 
 const { useQuery } = require('react-query')
 const { getCustomerReviews } = require('../api/customerReviewsApi')
@@ -14,7 +15,7 @@ const CustomerReviews = () => {
       <div className='font-medium sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div>
 
       <DesktopView>
-        <Swiper slidesPerView={3.2} spaceBetween={16}>
+        <Swiper slidesPerView={3.2} spaceBetween={16} {...swiperProps}>
           {customerReviews &&
             customerReviews?.map((customerReview) => (
               <SwiperSlide className='pb-4' key={customerReview.id}>
@@ -25,7 +26,7 @@ const CustomerReviews = () => {
       </DesktopView>
 
       <MobileView>
-        <Swiper slidesPerView={1.1} spaceBetween={8}>
+        <Swiper slidesPerView={1.1} spaceBetween={8} {...swiperProps}>
           {customerReviews &&
             customerReviews?.map((customerReview) => (
               <SwiperSlide className='pb-4' key={customerReview.id}>
@@ -38,6 +39,15 @@ const CustomerReviews = () => {
   )
 }
 
+const swiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  modules: [Autoplay]
+}
+
 const Card = ({ customerReview }) => (
   <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'>
     <div className='flex items-center space-x-3 mb-4'>
-- 
cgit v1.2.3