11'use client' ;
2- import React , { useState , useEffect } from 'react' ;
2+ import React , { useState , useEffect , useRef } from 'react' ;
33import Layout from '@learner/components/pos/Layout' ;
44
5- import { Container , Typography , Grid , Box , useMediaQuery } from '@mui/material' ;
5+ import { Container , Typography , Grid , Box , useMediaQuery , Button } from '@mui/material' ;
6+ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' ;
7+ import ChevronRightIcon from '@mui/icons-material/ChevronRight' ;
68import WhatsNewCarousel from '@learner/components/WhatsNewCarousel' ;
79import MoreWayCarousel from '@learner/components/MoreWayCarousel' ;
810import KnwoledgeCarousel from '@learner/components/KnwoledgeCarousel' ;
@@ -15,6 +17,11 @@ import { useRouter } from 'next/navigation';
1517import { SearchButton } from '@learner/components/pos/SearchButton' ;
1618import { ContentSearch , getfilterList } from '@learner/utils/API/contentService' ;
1719import { staticFilterContent } from '@shared-lib-v2/utils/AuthService' ;
20+ import { Swiper , SwiperSlide } from 'swiper/react' ;
21+ import { Navigation , Pagination , Autoplay } from 'swiper/modules' ;
22+ import 'swiper/css' ;
23+ import 'swiper/css/navigation' ;
24+ import 'swiper/css/pagination' ;
1825
1926const Content = dynamic ( ( ) => import ( '@Content' ) , {
2027 ssr : false ,
@@ -213,19 +220,120 @@ const rangeLength = contentLanguageField?.range?.length || 0;
213220 ] ;
214221
215222 const mediaMD = useMediaQuery ( '(max-width: 900px)' ) ;
223+ const prevRef = useRef < HTMLButtonElement > ( null ) ;
224+ const nextRef = useRef < HTMLButtonElement > ( null ) ;
216225
217226 return (
218227 < Layout onlyHideElements = { [ 'footer' ] } _topAppBar = { { _config : { } } } >
219228 < Grid container spacing = { 4 } >
220229 < Grid item xs = { 12 } md = { 6 } >
221- < Image
222- src = "/images/Tab with childrens 7.png"
223- alt = "Happy children learning together"
224- layout = "responsive"
225- width = { 1000 }
226- height = { 568 }
227- style = { { width : '100%' , height : '568px' } }
228- />
230+ < Box sx = { { width : '100%' , height : '500px' , position : 'relative' } } >
231+ < Button
232+ ref = { prevRef }
233+ sx = { {
234+ position : 'absolute' ,
235+ left : 10 ,
236+ top : '50%' ,
237+ transform : 'translateY(-50%)' ,
238+ zIndex : 10 ,
239+ minWidth : '40px' ,
240+ width : '40px' ,
241+ height : '40px' ,
242+ p : 0 ,
243+ borderRadius : '50%' ,
244+ backgroundColor : '#FFFFFF' ,
245+ boxShadow : '0px 2px 4px 0px #0000004D' ,
246+ color : '#1F1B13' ,
247+ '&:hover' : {
248+ backgroundColor : '#f5f5f5' ,
249+ } ,
250+ } }
251+ >
252+ < ChevronLeftIcon sx = { { fontSize : '28px' } } />
253+ </ Button >
254+ < Swiper
255+ modules = { [ Navigation , Pagination , Autoplay ] }
256+ spaceBetween = { 0 }
257+ slidesPerView = { 1 }
258+ loop = { true }
259+ autoplay = { {
260+ delay : 3000 ,
261+ disableOnInteraction : false ,
262+ } }
263+ pagination = { {
264+ clickable : true ,
265+ } }
266+ navigation = { {
267+ prevEl : prevRef . current ,
268+ nextEl : nextRef . current ,
269+ } }
270+ onBeforeInit = { ( swiper ) => {
271+ if ( typeof swiper . params . navigation !== 'boolean' ) {
272+ if ( swiper . params . navigation ) {
273+ swiper . params . navigation . prevEl = prevRef . current ;
274+ swiper . params . navigation . nextEl = nextRef . current ;
275+ }
276+ }
277+ } }
278+ style = { { width : '100%' , height : '100%' } }
279+ >
280+ < SwiperSlide style = { { position : 'relative' , width : '100%' , height : '500px' } } >
281+ < Image
282+ src = "/images/PLP Photos-02.jpg"
283+ alt = "PLP Photos 02"
284+ fill
285+ style = { { objectFit : 'cover' } }
286+ />
287+ </ SwiperSlide >
288+ < SwiperSlide style = { { position : 'relative' , width : '100%' , height : '500px' } } >
289+ < Image
290+ src = "/images/PLP Photos-03.jpg"
291+ alt = "PLP Photos 03"
292+ fill
293+ style = { { objectFit : 'cover' } }
294+ />
295+ </ SwiperSlide >
296+ < SwiperSlide style = { { position : 'relative' , width : '100%' , height : '500px' } } >
297+ < Image
298+ src = "/images/PLP Photos-04.jpg"
299+ alt = "PLP Photos 04"
300+ fill
301+ style = { { objectFit : 'cover' } }
302+ />
303+ </ SwiperSlide >
304+ < SwiperSlide style = { { position : 'relative' , width : '100%' , height : '500px' } } >
305+ < Image
306+ src = "/images/PLP Photos-05.jpg"
307+ alt = "PLP Photos 05"
308+ fill
309+ style = { { objectFit : 'cover' } }
310+ />
311+ </ SwiperSlide >
312+ </ Swiper >
313+ < Button
314+ ref = { nextRef }
315+ sx = { {
316+ position : 'absolute' ,
317+ right : 10 ,
318+ top : '50%' ,
319+ transform : 'translateY(-50%)' ,
320+ zIndex : 10 ,
321+ minWidth : '40px' ,
322+ width : '40px' ,
323+ height : '40px' ,
324+ p : 0 ,
325+ borderRadius : '50%' ,
326+ backgroundColor : '#FFFFFF' ,
327+ boxShadow : '0px 2px 4px 0px #0000004D' ,
328+ color : '#1F1B13' ,
329+ '&:hover' : {
330+ backgroundColor : '#f5f5f5' ,
331+ } ,
332+ } }
333+ >
334+ < ChevronRightIcon sx = { { fontSize : '28px' } } />
335+ </ Button >
336+ </ Box >
229337 </ Grid >
230338 < Grid
231339 item
0 commit comments