2 files changed, 22 insertions, 11 deletions
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index 50cfc0ff..889bb2ce 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -15,22 +15,23 @@ import Link from '@/core/components/elements/Link/Link'
 const HeroBanner = () => {
   const { heroBanners } = useHeroBanner()
 
-  const swiperBannerMobile = {
-    pagination: { dynamicBullets: true, clickable: true },
+  const swiperBanner = {
     autoplay: {
       delay: 6000,
       disableOnInteraction: false
     },
-    modules: [Pagination, Autoplay]
+    modules: [Pagination, Autoplay],
+    loop: true
+  }
+
+  const swiperBannerMobile = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: true, clickable: true }
   }
 
   const swiperBannerDesktop = {
-    pagination: { dynamicBullets: false, clickable: true },
-    autoplay: {
-      delay: 6000,
-      disableOnInteraction: false
-    },
-    modules: [Pagination, Autoplay]
+    ...swiperBanner,
+    pagination: { dynamicBullets: false, clickable: true }
   }
 
   return (
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'>